<p>Ich habe das folgende CSS (mit Bootstrap), um die Größe eines Bildes so zu ändern, dass es ohne Dehnung in einen 16:9-Container passt: </p> <pre class="brush:php;toolbar:false;"><span class="bg-dark d-flex justify-content-center align-items-center style="width: 384px; Höhe: 216px"> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="max-width: 100 %; max-height: 100 %" /> </span></pre> <p>Diese Methode funktioniert, aber wenn ich sie in einem Bootstrap-Raster verwende, läuft das Bild über das Raster hinaus (ich glaube, weil ich die Größe mit absoluten Werten festgelegt habe). Wie kann ich dafür sorgen, dass die Bildgröße geändert wird, ohne dass sie überläuft? </p> <p>(Hintergrundinformationen: Dies wird in einer Galeriekomponente verwendet. Die eingehenden Bilder können unterschiedliche Größen haben. Daher muss ich die Größe aller ändern, damit sie im Container derselben Größe angezeigt werden. Oben sind möglicherweise schwarze Bilder vorhanden oder unterer Rand)</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>