Fix die Größe aller Bilder

Question

Ich benutze Bootstrap 3, um eine Seite von Benutzerprofilen zu erstellen und sie in Reihen von 6 (auf einem großen Bildschirm) anzuzeigen. Das Problem ist, dass die Profile Bilder unterschiedlicher Größe haben und ich versuche herauszufinden, wie man sie alle auf die gleiche Höhe und Breite zwingen kann, ohne das Seitenverhältnis zu ändern (Beschneiden des Bildes ist in Ordnung). Hier ist ein fiddle

Dies ist, was ich bisher:

<div class="col-sm-2 thumb"> 
        <div class="card" border="1px;" style="width: 18rem;"> 
        <figure class="member"> 
    <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Annex_-_Stewart%2C_James_%28Call_Northside_777%29_01.jpg/220px-Annex_-_Stewart%2C_James_%28Call_Northside_777%29_01.jpg" height="150" alt="Card image cap"> 
    <figcaption class="member-details bordered no-top-border"> 
         <h3> 
         Jimmy Stewart 
         </h3> 
         <p>Actor</p> 

        </figcaption> 
        </figure> 
</div> 

       </div><!-- /.col --> 

Answer 1

Dies kann leicht mit object-fit: cover; getan werden, aber dieser Funktion is not supported by IE/Edge. Wenn Sie IE-Unterstützung benötigen, können Sie versuchen, background-size: cover; zu verwenden, was mindestens supported by the latest IE ist.

Hier ist eine funktionierende jsfiddle with both solutions.

Answer 2

Sie benötigen die overflow: hidden Stil zu verwenden. Hier ist ein Beispiel, wie Sie Bild im div-Elemente bleiben würde:

https://jsfiddle.net/ajpofdzr/6/

Answer 3

Dies könnte hilfreich sein: Centre crop thumbnails with CSS

.thumbnail { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    overflow: hidden; 
} 
.thumbnail img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    height: 100%; 
    width: auto; 
    -webkit-transform: translate(-50%,-50%); 
     -ms-transform: translate(-50%,-50%); 
      transform: translate(-50%,-50%); 
} 
.thumbnail img.portrait { 
    width: 100%; 
    height: auto; 
}