css - 如何在 Bootstrap 缩略图方形和响应中制作图像？

Question

目前我正在使用 Bootstrap 缩略图。这段代码正是我想要的，但仅限于桌面 View 。一旦我调整到移动设备，它会保留我指定的 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: 30vh; 
   width : 30vw;
}