如何在自舉縮略圖中適合寬幅圖像？

Question

我有一個四列行（col-md-3）行。每列都有一個寬度爲220px和height-360px的縮略圖。如何用不同分辨率的圖像（例如：1920X1080px或2480 X 3508px）填充/覆蓋縮略圖div？

我已經試過這樣：

 <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（寬）的圖像，它只是填充的一半縮略圖。我想要的是保持寬高比並覆蓋縮略圖。什麼是最簡單的解決方案？

Answer 1

如果我理解正確的話，也有一些解決方案，你可以給每個.thumbnail添加不同類別和使用CSS增加每個.thumbnail背景圖像，但現在對你目前的代碼，你可以添加這個CSS，可以解決你的問題：

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

編輯：

如果你想保持縱橫比，我建議增加適當類的.thumbnail HTML元素，然後用CSS添加背景圖像。

想象一下：

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") 
}