如何在Bootstrap縮略圖中創建圖像並做出響應？

Question

目前我正在使用引導縮略圖。這段代碼完全符合我的要求，但只在桌面視圖中顯示。一旦我調整到移動設備，它會保留我指定的358x358大小，所以它沒有響應。

基本上我希望縮略圖圖像總是被裁剪爲正方形，而不管提供給它的圖像文件如何。我如何使這種響應速度保持相同的方形圖像寬高比？謝謝你的幫助。

.thumb-img{ 
    object-fit: cover; 
    overflow: hidden; 
    height: 358px; 
    width : 358px; 
}   

，我使用它像這樣

<div class="thumbnail"> 
     <img class="thumb-img" src="66-Yacht-582x357.jpg" alt="yacht" /> 
</div> 

Answer 1

對於響應大小，您可以使用vw對px。 像這樣：

.thumb-img{ 
    object-fit: cover; 
    overflow: hidden; 
    height: 30vw; 
    width : 30vw; 
}