Bild in ansprechenden div

Hier ist mein codepen mit dem Problem: http://codepen.io/Golgota/pen/gwvGGj Bild in ansprechenden div

Und mein CSS:

.bloc { 
    background-color:white; 
    float:left; 
    width:100%; 
    margin: 10px; 
    padding: 10px; 
    height: 500px; 
} 

img { 
    max-width:100%; 
    max-height:100%; 
} 

@media all and (min-width: 40em) { 
    .bloc { 
    float: left; 
    width: 31%; 
    margin: 10px; 
    height: 500px; 
    } 
}

Ich habe 3 reagiert, div .bloc Ich möchte sie auf gleicher Höhe halten. Das Problem kommt von den Bildern, die unterschiedliche Größen haben.

Gibt es eine Möglichkeit 3 .bloc mit der gleichen Höhe zu haben, ohne die Auflösung der Bilder zu ändern oder Scrollen?

Prost!

Quelle

2016-10-07 CommonPeople

einen Blick auf mein Code nehmen, kann sein, dass u –

/* item styles */ 
 
.item-image { 
 
    position: relative; 
 
    overflow: hidden; 
 
    padding-bottom: 50%; 
 
    border: 1px solid #ddd; 
 
} 
 
.item-image img { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
} 
 
.item-content { 
 
    padding: 15px; 
 
    background: #72cffa; 
 
} 
 
.item-text { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 100px; 
 
} 
 

 
/* centering styles for jsbin */ 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
html { 
 
    display: table; 
 
} 
 
body { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Css aspect ratio to have images of same height</title> 
 
    <meta name="description" content="Css aspect ratio to have images of same height"> 
 
    <!-- include bootstrap --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
     
 
     <div class="col-xs-4 col-sm-4"> 
 
     <div class="item-image"> 
 
      <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" class="img-responsive"> 
 
     </div> 
 
     <div class="item-content"> 
 
      <div class="item-text"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
      </div> 
 
     </div> 
 
     </div> 
 
     
 
     <div class="col-xs-4 col-sm-4"> 
 
     <div class="item-image"> 
 
      <img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg" class="img-responsive"> 
 
     </div> 
 
     <div class="item-content"> 
 
      <div class="item-text"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
      </div> 
 
     </div> 
 
     </div> 
 
     
 
     <div class="col-xs-4 col-sm-4"> 
 
     <div class="item-image"> 
 
      <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" class="img-responsive"> 
 
     </div> 
 
     <div class="item-content"> 
 
      <div class="item-text"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec velit nulla. Cras finibus mollis dolor, ac rhoncus diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin gravida iaculis orci eget malesuada. Morbi pulvinar, purus sit amet porta laoreet, quam orci fermentum leo, in interdum ligula elit id magna. Nam justo massa, ultrices eget dictum vitae, porttitor eget eros. 
 
      </div> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 

 
    
 
</body> 
 
</html>

Quelle

2016-10-07 09:48:33

Ya das ist gut – Joyson

können Sie die object fit verwenden, aber überprüfen Sie die Unterstützung zuerst

Sie können dies tun,

body { 
 
    background-color: orange; 
 
    padding: 5%; 
 
    margin: auto; 
 
    box-sizing: border-box; 
 
} 
 
.block-holder .bloc { 
 
    background-color: white; 
 
    float: left; 
 
    width: 32.66%; 
 
    padding: 10px; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.block-holder .bloc:not(:first-child):not(:last-child){ 
 
    margin: 0 1%; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: 50vh; 
 
    object-fit: cover; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: border-box; 
 
}

<div class="block-holder"> 
 
    <div class="bloc"> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"> 
 
    <h2>Lorem ipsum</h2> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora. 
 
     <p> 
 
    </div> 
 
    <div class="bloc"> 
 
    <img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg" /> 
 
    <h2>Lorem ipsum</h2> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora. 
 
     <p> 
 
    </div> 
 
    <div class="bloc"> 
 
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" /> 
 
    <h2>Lorem ipsum</h2> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora. 
 
     <p> 
 
    </div> 
 
</div>

Quelle

2016-10-07 09:45:18 mmativ

helfen Er fragte diese 'Ich habe 3 reaktions div .bloc Ich mag würde sie auf gleicher Höhe zu halten. Das Problem kommt von den Bildern, die unterschiedliche sizes' nicht die volle Breite Bild haben Sie – Joyson

@Joyson wieder das Snippet zu überprüfen, – mmativ

jetzt diesen z gut – Joyson

Versuchen Sie es. Ich habe nur das Bild min-height in Pixel anstelle von% geändert.

body { 
 
    background-color:orange; 
 
    padding: 5%; 
 
    margin:auto; 
 
} 
 

 
.bloc { 
 
    background-color:white; 
 
    float:left; 
 
    width:100%; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    height: 500px; 
 
} 
 

 
img { 
 
    max-width:100%; 
 
    min-height: 270px; 
 
} 
 

 
@media all and (min-width: 40em) { 
 
    .bloc { 
 
    float: left; 
 
    width: 31%; 
 
    margin: 10px; 
 
    height: 500px; 
 
    } 
 
}

<div class="bloc"> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"> 
 
    <h2>Lorem ipsum</h2> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora. 
 
    <p> 
 
</div> 
 
<div class="bloc"> 
 
    <img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg"/> 
 
    <h2>Lorem ipsum</h2> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora. 
 
    <p> 
 
</div> 
 
<div class="bloc"> 
 
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg"/> 
 
    <h2>Lorem ipsum</h2> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora. 
 
    <p> 
 
</div>

Quelle

2016-10-07 09:58:52

Bild in ansprechenden div

Antwort

Verwandte Themen