Wie man eine Box mit einem Bild füllt, ohne es zu verzerren

Verwendung von object-fit

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

1. Das Bild sollte die Box vollständig ausfüllen, das Seitenverhältnis beibehalten und jeglichen Überstand auf der Seite abschneiden, die zu groß ist, um zu passen.
2. Das Bild sollte in die Box passen, wobei der Hintergrund als Balken auf der zu kleinen Seite hindurchscheint.
3. Das Bild sollte die Box ausfüllen und sich strecken, was bedeuten kann, dass es im falschen Seitenverhältnis dargestellt wird.

Die object-fit-Eigenschaft macht jede dieser Herangehensweisen möglich. Im folgenden Beispiel können Sie sehen, wie unterschiedliche 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 black;
}

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

.box1 img {
  object-fit: cover;
}

.box2 img {
  object-fit: contain;
}

.box3 img {
  object-fit: fill;
}