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、またはCALC画像の最大高さ：CALC （100vh-100px）。オーバーフロー：#servicesのために隠されても機能するかもしれません。また、img-responsiveまたはimgクラスにwidth、adn heightを追加することもできます。