<p>我有以下的CSS（使用Bootstrap）来调整图像大小，使其适应16:9的容器而不会拉伸：</p> <pre class="brush:php;toolbar:false;">&lt;span class="bg-dark d-flex justify-content-center align-items-center style="width: 384px; height: 216px"&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="max-width: 100%; max-height: 100%" /&gt; &lt;/span&gt;</pre> <p>这个方法是有效的，但是当我在Bootstrap网格中使用它时，图像会溢出网格（我认为是因为我用绝对值固定了大小）。我该如何使图像调整大小，但不溢出？</p> <p>（背景信息：这是在一个画廊组件中使用的，进来的图像可能是不同的大小，所以我需要将它们全部调整为相同大小的容器中显示，顶部或底部可能会有黑色的边距）</p>

<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>