如何在保持固定影像尺寸的同時實現響應式設計？

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>