Bootstrap - machen Sie die Bilder in der Spalte mit der gleichen Höhe?

Question

Wie kann ich die Bilder in der Spalte alle gleich groß machen?

Ich versuche, ein Rasterlayout wie dieses site zu machen.

Dies ist mein Versuch mit bootsrap.

Aber ich kann nicht die Höhen machen das gleiche:

Code:

<div class="container"> 
    <div class="row"> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-6 col-sm-6"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

    </div> 

    <div class="row"> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-6 col-sm-6"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

    </div> 

    <div class="row"> 

     <div class="col-md-6 col-sm-6"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
      </div> 
     </div> 

    </div> 
</div> 

Ist es etwas, ich brauche es auf der Bildseite zu tun? Wenn ja, welche Größen von Bildern sollte ich einhalten?

Oder ist es etwas, was ich auf Javascript Seite oder CSS tun sollte?

Oder ein Plugin, das ich verwenden sollte?

Irgendwelche Ideen?

Answer 1

Ich habe Ihnen ein Beispiel gemacht, wie Sie erreichen können, was Sie wollen.

wird mit background-images anstelle von Bildern verwendet. also machen Sie zuerst die Spalten gleich groß und verwenden Sie dann Hintergrundbilder wie die Bilder, die Sie in die .grid-items eingeben. und du versteckst das erste img mit opacity:0;

müssen Sie die Original-imgs zu halten, so dass die grid-items eine physikalische Höhe

Lassen Sie mich haben wissen, ob das funktioniert für Sie

sehen>jsfiddle

Code verwendet in CSS

.grid-item { 
    display: block; 
    margin: 0 5px; 
    border: 1px solid red; 
    height:100%; 
} 
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { 
    padding-left: 0; 
    padding-right: 0; 
} 


.row { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
    flex-wrap: wrap; 
    margin:10px 0; 
} 
.row > [class*='col-'] { 
    display: flex; 
    flex-direction: column; 

} 
.row > [class*='col-'] > [class*='col-'] { 
    height:100%; 
} 
a.grid-item img { opacity:0} 
a.grid-item { background-size:cover } 

.col-md-3 .col-md-12 + .col-md-12 { 
    margin-top:10px; 
} 

HTML

<div class="container"> 
<div class="row"> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-6 col-sm-6"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

</div> 

<div class="row"> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-6 col-sm-6"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

</div> 

<div class="row"> 

    <div class="col-md-6 col-sm-6"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
     </div> 
    </div> 

</div> 
</div>