HTML <picture>-Tag
Das <picture>-Element ist ein Container für ein oder mehrere <source>-Elemente und ein <img>-Element, das das letzte Kindelement im Block ist.
Das <source>-Element enthält Versionen eines Bildes für verschiedene Anzeigegeräte-Szenarien. Das <img>-Element beschreibt die Bildgröße und andere Attribute. Der Browser prüft jedes untergeordnete <source>-Element und lädt das am besten passende Bild. Wenn keine Übereinstimmung gefunden wird, zeigt der Browser das vom <img>-Tag angegebene Bild an.
Das <picture>-Element ermöglicht die Angabe mehrerer Bilder, um sich besser an verschiedene Viewport-Größen anzupassen und die Skalierung eines einzelnen Bildes zu vermeiden. Es kann für folgende Zwecke verwendet werden:
- Bilder für verschiedene Medienbedingungen zuzuschneiden und zu bearbeiten,
- alternative Bildformate anzubieten, wenn bestimmte Formate nicht unterstützt werden.
Hinweis: Die object-position und object-fit Eigenschaften gelten für das <img>-Fallback-Element, um dessen Größe und Ausrichtung innerhalb des Containers zu steuern.
Das <picture>-Tag wurde mit HTML5 eingeführt.
Syntax
Das <picture>-Tag wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<picture>) und dem schließenden (</picture>)-Tag geschrieben.
HTML <picture>-Tag
<picture>
<source media="...">
<source media="...">
<img src="...">
</picture>Beispiel für das HTML <picture>-Tag:
HTML <picture>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="https://www.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
<source media="(min-width: 430px)" srcset="https://www.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
<img src="https://www.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;" />
</picture>
<p>Some information about pictures</p>
</body>
</html>Der Browser wertet <source>-Elemente in Reihenfolge aus und lädt das erste, dessen media-Abfrage mit der aktuellen Viewport-Größe übereinstimmt. Wenn keine <source>-Übereinstimmung gefunden wird, fällt es auf das <img>-Element zurück. Das <picture>-Element wird in allen modernen Browsern weitgehend unterstützt.
Attributes
Diese Attribute gelten für die <source>-Elemente innerhalb von <picture>:
| Attribut | Wert | Beschreibung |
|---|---|---|
| media | media_query | Gibt eine Medienabfrage an, um die Viewport-Größe abzugleichen. |
| srcset | URL | Gibt die URL des Bildes an, das in verschiedenen Situationen verwendet werden soll. |
| sizes | length | Gibt die Breite des Bildes für verschiedene Viewport-Größen an. |
| type | MIME_type | Gibt den MIME-Typ der verknüpften Ressource an (z. B. image/webp). |
| src | URL | Gibt die URL des Bildes an. Wird als Alternative zu srcset verwendet. |
Jedes <source>-Element muss entweder ein srcset- oder ein src-Attribut enthalten. Das Fallback-<img>-Element verwendet das src-Attribut.
Das <picture>-Tag unterstützt die Globalen Attribute.
Praxis
Was ist eine Funktion des HTML <picture>-Tags?