CSS img溢出我的div

Question

我有3个div高度：100vh 但随着响应我的imgs溢出。您可以在图像上查看。 抱歉我的英语很差！

这是html：

<section id="services" class="container content-section text-center">
    <div class="col-lg-8 col-lg-offset-2">
        <div class="row">
            <div class="col-lg-6">
                <h2>Services </h2>
                <ul> 
                    <li>Covoiturages </li>
                    <li>Food </li>
                    <li>Hébergement </li>
                </ul>
            </div>
            <div class="col-lg-6">
                <img src="img/mockup-iphone.png" alt="mockup iphone" class="img-responsive"/>
            </div>
        </div>

</section> <!-- close about -->
<section id="communities" class="container content-section text-center">
          <div class="row">
            <div class="col-lg-6">
                 <img src="img/mockup-iphone.png" alt="mockup iphone" class="img-responsive"/>
            </div>
            <div class="col-lg-6">
                <h2>Communities </h2>
                <ul> 
                    <li>Texte </li>
                    <li>Texte </li>
                    <li>Texte </li>
                </ul>
            </div>
        </div>
</section>

和css：

#services{
    width: 100%;
    height:100vh;
    background-color: #62b030;
}
#services img{
    height:90%;
}

Answer 1

尝试将img缩小到高度：80vh，或者计算图像max-height：calc（100vh-100px）;溢出：为#services隐藏也可能有效。你也可以为你的img-responsive或你的img类添加宽度，高度。