產生方縮略圖圖像不管圖像比率

Question

我尋找一個CSS唯一的解決辦法，以產生方縮略圖無論圖像比：

.thumbnail { 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
} 
img { 
    width: 100%; 
    height: auto; 
} 

上面的例子將只創建一個正方形縮略圖如果圖像是縱向視圖，橫向視圖圖像將不會覆蓋縮略圖的整個高度。

是否有CSS解決方案（除了將其設置爲背景圖像）？

Answer 1

這樣做的唯一方法（我認爲）沒有通常的background-image/background-size方法是使用object-fit。雖然它不會在IE瀏覽器：

.thumbnail { 
 
    width: 150px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
} 
 

 
/* for demo only...*/ 
 
div { 
 
    margin-bottom: 15px; 
 
} 
 
.noscale { 
 
    width: auto; 
 
    height: auto; 
 
}

<div class="thumbnail"> 
 
    <img src="//placekitten.com/200/300"> 
 
</div> 
 

 
<div class="thumbnail"> 
 
    <img src="//placekitten.com/300/200"> 
 
</div> 
 

 
<h4> 
 
Images for reference: 
 
</h4> 
 
<img src="//placekitten.com/200/300" class="noscale"> 
 
<img src="//placekitten.com/300/200" class="noscale">

Browser Support #object-fit