如何使用 img-fluid，设置自定义高度而不变形图像？

Question

我有一张流畅的图片 (.img-fluid)，我将高度设置为 245 像素，宽度始终为 100%。当我在小型设备上检查我的页面时，高度工作得很好，但图像看起来在宽度上被挤压了。我的图像必须始终看起来正确，而不是被挤压。

<div class="product-image">
    <img src="https://static.reverb-assets.com/assets/homepage/open-graph- 
    7c32c7390769b2d0ab9366d1547b0a829b1c44f2eb991a9b0d1b3f59d0e62bf4.jpg" 
    alt="Foto del producto" class="img-fluid">
</div>

.product-image {
  width: 100%;
  height: 245px;
}

.product-image .img-fluid {
  max-width: 100%;
  height: 100%;
}

Answer 1

看起来 object-fit CSS 属性应该符合您的需求。

Reference.

img {
  width: 100%;
  height: 245px;
}

.img--cover {
  object-fit: cover;
}

.img--contain {
  object-fit: contain;
}

<div>
  <img src="https://www.talentz.net/wp-content/uploads/CG10-2.jpg" alt="Foto del producto" class="img--cover">
</div>
<div>
  <img src="https://www.talentz.net/wp-content/uploads/CG10-2.jpg" alt="Foto del producto" class="img--contain">
</div>

Answer 2

在图像的两边使用一个auto值

<div class="product-image">
  <img src="https://via.placeholder.com/150x245.png" alt="Foto" class="img-fluid">
</div>

.product-image {
  width: 100%;
  height: 245px;
}
.product-image .img-fluid {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

如何使用 img-fluid，设置自定义高度而不变形图像？

How to use img-fluid, set a custom height and not deform the image?

css

responsive-images

bootstrap-4