ワイド画像をブートストラップサムネイルに収める方法は？

Question

私は4列の行（col-md-3）の行を持っています。各列には、幅220px、高さ360kのサムネイルがあります。サムネイルdivを異なる解像度の画像（例：1920X1080pxまたは2480X 3508px）で塗りつぶしたり覆ったりできますか？

私はこれ試してみました：

 <div class="thumbnail"> 
      <img src="images/highres.jpg" alt="Nosmoking image"> 

     </div><!----End of thumbnail--> 

    </div> 

</div> 

CSS：

  img{ 
     object-fit: cover; 
    } 

    .thumbnail{ 
     height: 360px; 
     width: 220px; 
     overflow:hidden; 
    } 

私は1920X1080px（ワイド）の画像を使用していると、それだけの半分を埋めています私が望むthumbnail.whatはアスペクト比を保持し、サムネイルをカバーすることです。最も簡単な解決策は何ですか？

Answer 1

あなたが正しく理解していれば、いくつかの解決策があります。それぞれ.thumbnailに異なるクラスを追加し、CSSを使用して.thumbnailのそれぞれの背景イメージを追加できます。ただし、現時点では現在のコードでこのCSSを追加して解決できます。問題：

.thumbnail > img{ 
    width:100%; 
    height:100%; 
} 

EDIT：あなたはアスペクト比を維持したい場合は

は、私は、CSSの背景を使用して画像を追加し、あなたの.thumbnail HTML要素に適したクラスを追加することをお勧めします。

これを想像：

HTML：

<div class="thumbnail thumbnail-1"></div> 
<div class="thumbnail thumbnail-3"></div> 
<div class="thumbnail thumbnail-4"></div> 

CSS：私は高さを与える場合

.thumbnail { 
    background-size:cover; 
    backgrond-repeat:no-repeat; 
} 

.thumbnail-1{ 
    background-image:url("image1.jpg") 
} 

.thumbnail-2{ 
    background-image:url("image2.jpg") 
} 

.thumbnail-3{ 
    background-image:url("image3.jpg") 
}