Middle

Welches HTML-Tag hilft dabei, verschiedene Bilder für unterschiedliche Bildschirmauflösungen zu laden?

sobes.tech KI

Antwort von AI

Um HTML verwendet das <picture>-Tag, um verschiedene Bilder abhängig von der Bildschirmauflösung zu laden. Innerhalb können mehrere <source> mit dem Attribut media angegeben werden, das die Bedingungen für die Bildauswahl festlegt, sowie das <img>-Tag mit einem Ersatzbild.

Beispiel:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Beispielbild">
</picture>

In diesem Beispiel wählt der Browser large.jpg, wenn die Bildschirmbreite 800px oder mehr beträgt, medium.jpg bei einer Breite zwischen 400px und 799px, und small.jpg für kleinere Bildschirme.

Für einfache Fälle kann auch das srcset-Attribut im <img>-Tag verwendet werden, um verschiedene Bilder mit ihren Größen anzugeben.

Zurück Als nächstes