CSS img Überlauf mein div

Question

Ich habe 3 div mit Höhe: 100vh Aber mit den reaktionsfähigen meine imgs Überlauf. Sie können das auf dem Bild überprüfen. Entschuldigung für mein schlechtes Englisch!

Dies ist der 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> 

Und die CSS: 80vh oder Calc Bild max-height:

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

Answer 1

das img auf Höhe Versuchen Sie kleinere calc (100vh-100px); Überlauf: versteckt für # Dienste könnte auch funktionieren. Sie können auch Breite, Höhe und Höhe Ihrer img-responsive oder Ihre IMG-Klasse hinzufügen.