Bilder im Bootstrap-Gitter gleich groß machen

Question

Ich erstelle eine Bildergalerie mit 3 Zeilen, die jeweils 3 Bilder enthalten, indem ich das Bootstrap-Grid-System verwende. Alle Bilder haben unterschiedliche Größe. Ich versuche, alle Bilder gleich groß zu machen. Ich habe versucht, die maximale Höhe oder maximale Breite in meinem CSS zu verwenden, aber es hat nicht geholfen, alle Bilder (Thumbnails) ähnlicher Größe zu machen. Soll ich nur die Miniaturklasse aufrufen oder gibt es eine andere Lösung?

body { 
 
     padding-top: 70px;} 
 
    .row .flex { 
 
    display: inline-flex; 
 
    width: 100%;} 
 
    img { 
 
    width:100%; 
 
    min-height:100px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row match-to-row"> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="https://source.unsplash.com/eKTUtA74uN0" alt=""> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="https://source.unsplash.com/x-tbVqkfQCU" alt=""> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="https://source.unsplash.com/cjpGSEkXfwM" alt=""> 
 
     </div> 
 
     </div> 
 

 
     <div class="row match-to-row"> 
 
     <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
      <img src="https://source.unsplash.com/63JKK67yGUE" alt=""> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
      <img src="https://source.unsplash.com/YP6lDrlxWYQ" alt=""> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
      <img src="https://source.unsplash.com/NqE8Ral8eCE" alt=""> 
 
      </div> 
 
     </div> 
 

 
     <div class="row flex match-to-row"> 
 
      <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
       <img src="https://source.unsplash.com/6oUsyeYXgTg" alt=""> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
       <img src="https://source.unsplash.com/WF2lvywxdMM" alt=""> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
       <img src="https://source.unsplash.com/2FdIvx7sy3U" alt=""> 
 
      </div> 
 
      </div> 
 
    </div> 
 
    </div>

Answer 1

die CSS-Klasse img-Reaktion auf jedes Bild hinzufügen.

Answer 2

gerade dies ändern:

img { 
    width: 100px; // how much you want 
    min-height: 100px; 
    float: left; 
    margin: 10px; 
} 

Answer 3

Ich denke, die Eigenschaft Sie suchen object-fit ist

img { 
    width: 200px; /* You can set the dimensions to whatever you want */ 
    height: 200px; 
    object-fit: cover; 
} 

Die object-fit Eigenschaft ähnlich wie funktioniert würden Sie background-size: cover auf einem Hintergrundbild mit machen es füllt die Seite ohne zu strecken. Auf diese Weise können Sie in einer Regel festlegen, dass alle Bilder folgen, um sicherzustellen, dass sie die gleiche Größe haben, ohne das Bild zu verzerren.

Andere Werte, die Sie mit dieser Eigenschaft nutzen können, gehören:

• fill - strecken das Bild.
• contain - das Seitenverhältnis des Bildes beibehalten.
• cover - Füllen Sie die Höhe und Breite der Box.
• none - Behalten Sie die Originalgröße bei.
• scale-down - vergleichen Sie die Unterschiede zwischen none und contain, um die kleinste Objektgröße zu finden.

object-fit | CSS-Tricks