Wie kann ich mithilfe von CSS die Auswirkungen von „background-size: cover' und „background-size: include' auf Bildelemente erzielen?

Hintergrundgrößeneigenschaften für Bildelemente implementieren

Modernes CSS bietet eine Möglichkeit, Bilder auf ähnliche Weise wie die Hintergrundgröße anzuzeigen: Cover und Hintergrundgröße: enthalten Eigenschaften für Hintergrundbilder.

Lösung 1: Objektanpassung Eigenschaft

Für Browser mit Objektanpassungsunterstützung ermöglicht diese Eigenschaft eine nahtlose Replikation des Hintergrundgrößenverhaltens auf Bildelementen. Fügen Sie Ihrem Bild einfach das folgende CSS hinzu:

body {
  margin: 0;
}

img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS die Auswirkungen von „background-size: cover' und „background-size: include' auf Bildelemente erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!