So füllen Sie eine Box mit einem Bild, ohne es zu verzerren

Wenn Sie ein Bild mithilfe des HTML-Elements <img> zu einer Seite hinzufügen, behält das Bild die Größe und das Seitenverhältnis der Bilddatei bei oder die Größe der HTML-Attribute width oder height. Manchmal möchten Sie, dass das Bild die Box, in die Sie es platziert haben, vollständig ausfüllt. In diesem Fall müssen Sie zuerst entscheiden, was passieren soll, wenn das Bild das falsche Seitenverhältnis für den Container hat.

1. Das Bild soll die Box vollständig ausfüllen, das Seitenverhältnis beibehalten und überschüssige Teile abschneiden, die zu groß sind, um hineinzupassen.
2. Das Bild soll in die Box passen, wobei der Hintergrund als Balken auf der zu kleinen Seite durchscheint.
3. Das Bild soll die Box ausfüllen und sich strecken, was bedeuten kann, dass es im falschen Seitenverhältnis angezeigt wird.

Die Eigenschaft object-fit ermöglicht jede dieser Ansätze. Im folgenden Beispiel können Sie sehen, wie verschiedene Werte von object-fit funktionieren, wenn dasselbe Bild verwendet wird. Wählen Sie den Ansatz, der am besten zu Ihrem Design passt.

<div class="wrapper">
  <div class="box box1">
    <img
      alt="a colorful hot air balloon against a clear sky"
      src="https://mdn.github.io/shared-assets/images/examples/balloon.jpg" />
  </div>
  <div class="box box2">
    <img
      alt="a colorful hot air balloon against a clear sky"
      src="https://mdn.github.io/shared-assets/images/examples/balloon.jpg" />
  </div>
  <div class="box box3">
    <img
      alt="a colorful hot air balloon against a clear sky"
      src="https://mdn.github.io/shared-assets/images/examples/balloon.jpg" />
  </div>
</div>

.wrapper {
  height: 200px;
  display: flex;
  gap: 20px;
}

.box {
  border: 5px solid #000;
}

.box img {
  width: 100%;
  height: 100%;
}

.box1 img {
  object-fit: cover;
}

.box2 img {
  object-fit: contain;
}

.box3 img {
  object-fit: fill;
}