Wie erreicht man ein responsives Design unter Beibehaltung fester Bildabmessungen?

Question

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:

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

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?

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

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>