如何在保持固定图像尺寸的同时实现响应式设计？

Question

我有以下的CSS（使用Bootstrap）来调整图像大小，使其适应16:9的容器而不会拉伸：

<span class="bg-dark d-flex justify-content-center align-items-center style="width: 384px; 
height: 216px">
                <img
                  :src="slotProps.item.itemImageSrc"
                  :alt="slotProps.item.alt"
                  style="max-width: 100%; max-height: 100%"
                />
              </span>

这个方法是有效的，但是当我在Bootstrap网格中使用它时，图像会溢出网格（我认为是因为我用绝对值固定了大小）。我该如何使图像调整大小，但不溢出？

（背景信息：这是在一个画廊组件中使用的，进来的图像可能是不同的大小，所以我需要将它们全部调整为相同大小的容器中显示，顶部或底部可能会有黑色的边距）

Answer 1

要解决这个问题，您可以使用object-fit CSS属性。object-fit属性指定了图像应如何调整大小以适应其容器。cover值将调整图像大小以填充整个容器，同时保持其纵横比。

<span class="bg-dark d-flex justify-content-center align-items-center">
  <img
    :src="slotProps.item.itemImageSrc"
    :alt="slotProps.item.alt"
    style="object-fit: cover; max-width: 100%; max-height: 100%"
  />
</span>