すべての画像のサイズを固定

Question

私はブートストラップ3を使用してユーザープロファイルのページを作成し、それらを6行（大画面）で表示しています。 問題は、プロファイルにはさまざまなサイズの画像があり、縦横比を変えずに（画像を切り取っても）同じ高さと幅になるようにする方法を見つけようとしています。

<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

これは簡単にobject-fit: cover;で行われますが、この機能is not supported by IE/Edgeすることができます。 IEサポートが必要な場合は、background-size: cover;（少なくともsupported by the latest IE）を使用してみてください。

ここには作業jsfiddle with both solutionsがあります。

Answer 2

あなたはoverflow: hiddenスタイルを使用する必要があります。 はここにこれは私がこれまで持っているものであるfiddle

です。ここでは、画像をdiv要素にとどまる方法の例です：

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

Answer 3

これは役に立つことができます：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; 
}