文本旁边图像（响应）

Question

我已经和左和文本右侧图像的部分，它看起来不错，直到我改变浏览器的宽度或高度。事事不顺心，

这里是什么样子我改变宽度之前：

后：

什么即时试图实现看起来像下面：我想要实现对小屏幕（同样的想法，不一样的照片和文字）

这里是我的代码：https://jsfiddle.net/a6ktx5zv/

      <!-- 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

使用填充和利润创造的布局是不是最好的主意。你应该考虑引导和Flex-盒做的布局。填充和利润用于创建布局后做微小的调整。至于这个问题而言，你可以解决这个使用Flexbox的。

更换你的两个教学班，在回答的国家：

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

让我在评论中知道，如果你需要更多的帮助。