文本旁边的图像（响应式）

Question

我制作了一个部分，左侧是图像，右侧是文本，在我更改浏览器宽度或高度之前它看起来不错。一切都出错了，

这是我更改宽度之前的样子：

之后：

我试图实现的目标如下所示：我想在小屏幕上实现什么（相同的想法，不同的照片和文字）

      <!-- About US -->

  <section class="about-us">
    <div class="about-us-img">
      <img src="https://samikamal.github.io/Wild-Tiger-Restaurant/images/about-us.jpg" alt="">
    </div>

    <div class="about-us-text">
      <h2>Our Story</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam, ipsum quis pharetra suscipit, <br> <br>  elit mi accumsan nisi, quis mollis mauris nisi nec augue. Sed molestie turpis efficitur gravida iaculis. Quisque tempor, nunc et tincidunt ultricies, nunc metus semper sapien, ut aliquet lorem mi id nisi. Duis luctus dui odio, et mattis ligula porta eu.</p>

    </div>
  </section>

/* About-Us */

CSS:

.about-us{
    height: 90vh;
    width: 100%;

}

.about-us-img{
    max-width: 50%;;
    height: 100%;
    overflow: hidden;


}
.about-us-img img{
    max-width: 100%; 
    display:block; 
    height: auto;
}
.about-us-text{
    max-width: 736px;
    text-align: center;
    margin-top: -47em;
    margin-right: 10em;
    float: right;
}

.about-us-text p{
    font-size: 2rem;
    line-height: 1.5
}


<!-- Meals Photo's -->

Answer 1

使用填充和边距创建布局并不是最好的主意。您应该查看 bootstrap 和 flex-box 来进行布局。创建布局后，填充和边距用于进行微小的调整。至于这个问题，你可以使用 flexbox 来解决。

将你的两个类替换为答案中的两个：

.about-us{
    height: 90vh;
    width: 100%;
    display: flex;        
 }
.about-us-text{
    max-width: 736px;
    text-align: center;
    float: right;
}

如果您需要更多帮助，请在评论中告诉我。

文本旁边的图像（响应式）

Image beside text (Responsive)

html

css

image

responsive