Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mit HTML und CSS den Effekt „Hintergrundgröße: Cover' und „Hintergrundgröße: enthalten' auf Bilder erzielen?

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

Linda Hamilton
Freigeben: 2024-12-28 07:16:35
Original
802 Leute haben es durchsucht

How Can I Achieve the

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; */
}
Nach dem Login kopieren
<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage