Wie kann ich mit HTML und CSS den Effekt „Hintergrundgröße: Cover' und „Hintergrundgröße: enthalten' auf Bilder erzielen?

Anzeigen von Bildern mit Eigenschaften, die „Hintergrundgröße: Cover“ und „Hintergrundgröße: enthalten“ entsprechen

Ihre Bedenken ergeben sich aus dem Wunsch, Bilder in HTML-Dokumenten mit denselben Eigenschaften wie die CSS-Eigenschaft „background-size: cover“ für Hintergrundbilder anzuzeigen. Sie haben mit den Stilen „width: 100 %“ und „width: auto“ für Bilder innerhalb von div-Elementen experimentiert, sind jedoch auf Einschränkungen bei der Reaktionsfähigkeit und unerwünschtes Verhalten aufgrund von Bildschirmgrößenschwankungen gestoßen.

Lösung Nr. 1 : object-fit-Eigenschaft (eingeschränkte Browserunterstützung)

Die „object-fit“-Eigenschaft wurde speziell für diesen Zweck entwickelt. Durch die Einstellung „object-fit: cover;“ Mit dem img-Element können Sie das gewünschte Verhalten erreichen, indem Sie bewirken, dass das Bild den verfügbaren Platz ausfüllt und gleichzeitig sein Seitenverhältnis beibehält. Es ist jedoch wichtig zu beachten, dass diese Eigenschaft vom Internet Explorer nicht unterstützt wird.

Beispiel:

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

<img src="/static/imghwm/default1.png" data-src="https://loremflickr.com/1500/1000" class="lazy" alt="A random image from Flickr">

Das obige ist der detaillierte Inhalt vonWie kann ich mit HTML und CSS den Effekt „Hintergrundgröße: Cover' und „Hintergrundgröße: enthalten' auf Bilder erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!