Wie kann ich das CSS-Verhalten „background-size: cover' mit HTML-Bildelementen erreichen?

Bilder mit HTML-Elementen abdecken und enthalten

Die Eigenschaften „background-size: cover“ und „contain“ von CSS bieten eine flexible Bildskalierung für Hintergründe. Was aber, wenn Sie eine ähnliche Kontrolle über die mithilfe von HTML-Elementen angezeigten Bilder wünschen? So geht's:

Lösung 1: Die object-fit-Eigenschaft

Mit der object-fit-Eigenschaft können Sie angeben, wie ein Bild in seinen Container passt. Wenn Sie es auf „cover“ setzen, wird das Verhalten von „background-size: cover“ repliziert und das Bild so skaliert, dass es den gesamten Container ausfüllt, während das Seitenverhältnis erhalten bleibt.

img {
  object-fit: cover;
}

Hinweis: IE unterstützt kein Objekt -fit.

Das obige ist der detaillierte Inhalt vonWie kann ich das CSS-Verhalten „background-size: cover' mit HTML-Bildelementen erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!