Das Tag <picture> wird verwendet, um ein oder mehrere Elemente <source> und ein Element <img> zu speichern.
Der Browser betrachtet den Inhalt der Tochterelemente <source>, und falls keine der angegebenen Bedingungen für die Hochladung von Bildern befriedigen sein kann, lädt der Browser das im Tag <img> angegebene Bild hoch.
Der Gebrauch des Elements <picture> erlaubt, einige Varianten des Bildes, die für die verschiedenen Bildschirme geeignet sind, hochzuladen.
Das Tag <picture> ist neu in HTML 5.
Syntax
Das Tag <picture> wird gepaart verwendet, sein Inhalt wird zwischen den Start- (<picture>) und Endtags (</picture>) platziert.
Das Tag <picture> enthält ein oder mehrere Elemente <source> und ein Element <img>, welches das letzte Kindelement im Block ist.
<picture>
<source media="...">
<source media="...">
<img src="...">
</picture>Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
<source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
<img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
</picture>
<p>Einige Information über das Bild</p>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| media | media_query | Es akzeptiert jede gültige Mediaabfrage, die normalerweise durch CSS definiert würde. |
| sizes | Es definiert einen einzelnen Breitendeskriptor, eine einzelne Mediaabfrage mit dem Breitendeskriptor oder eine kommaabgegrenzte Liste von Mediaabfragen mit einem Breitendeskriptor. Es ist ein neues Attribut in HTML5. |
|
| src | URL | Es gibt die URL-Adresse des Images an. |
| srcset | URL | Es gibt die URL-Adresse des Images an, um in verschiedenen Situationen zu verwenden. (obligatorish) Es ist ein neues Attribut in HTML5. |
| type | video/ogg video/mp4 video/webm audio/ogg audio/mpeg |
Es definiert den MIME-Typ. |
Das Tag <picture> unterstützt Globale Attribute.
Browser-Support
|
|
|
|
|---|---|---|---|
| 38+ | 38+ | 9.1+ | 25+ |
Übe dein Wissen
