如何使Bootstrap缩略图中的图像方形和响应？

Question

目前我使用的是bootstrap缩略图。这段代码完全符合我的要求，但仅限于桌面视图。一旦我调整到移动设备，它保留了我指定的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;
}  

Answer 2

尝试在响应中以“%”提供高度和宽度，这对我有用。

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