<p>I have the following CSS (using Bootstrap) to resize an image so that it fits into a 16:9 container without stretching: </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>This method works, but when I use it in a Bootstrap grid, the image overflows the grid (I think because I fixed the size with absolute values). How can I make the image resize but not overflow? </p> <p>(Background info: This is being used in a gallery component, the images coming in may be different sizes, so I need to resize them all to display in the same size container, there may be black ones on the top or bottom margin)</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>