如何在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; 
}