Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.
Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.
Das HTML-Element <picture> ist ein Container, der zur Angabe mehrerer <source>s (Bildquellen) für ein <img> dient. Der Browser wird die Quelle verwenden, die aufgrund des gegenwärtigen Seitenlayouts (die Begrenzungen der Box, in der das Bild auftaucht) und dem Anzeigegerät (z.B. ein normales or hiDPI-Gerät) am geeignesten erscheint.
Usage Context
| Content categories | Flow content, phrasing content, embedded content |
|---|---|
| Permitted content | Null oder mehr <source>-Elemente, gefolgt von einem <img>-Element, optional vermischt mit Skript-unterstützenden Elementen. |
| Tag omission | Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich. |
| Permitted parent elements |
Jegliches Element, das eingebetteten Inhalt erlaubt. |
| DOM interface | HTMLPictureElement |
Attribute
Dieses Element beinhaltet nur globale Attribute.
Beispiel 1: Verwendung des Attributs media
Das Attribut media erlaubt die Angabe eines Media-Query, das der User Agent auswertet, um das gewünschte <source>-Element auszuwählen. Wenn ein Media Query zu false evaluiert, wird das <source>-Element übersprungen.
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="MDN"> </picture>
Beispiel 2: Verwendung des Attributs type
Das Attribut type erlaubt die Angabe eines MIME-Typs für Ressourcen, die im Attribut srcset des Elements <source> angegeben sind. Wenn der User Agent den angegebenen Typ nicht unterstützt, wird das <source>-Element übersprungen.
<picture> <source srcset="mdn-logo.svg" type="image/svg+xml"> <img src="mdn-logo.png" alt="MDN"> </picture>
Beispiel 3: Verwendung des Attributs srcset
Das Attribut srcset erlaubt es verschiedene Bildgrößen auszuliefern. Höhere Auflösungen werden bei höheren Zoomstufen im Browser, oder bei Bildschirmen mit hohen Pixeldichten (DPI) geladen.
<picture> <source srcset="mdn-logo.png 1x, mdn-logo_x2.png 2x, mdn-logo_x3.png 3x"> <img src="mdn-logo.png" alt="MDN"> </picture>
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard Die Definition von '<picture>' in dieser Spezifikation. |
Lebender Standard | Initial definition |
Browser compatibility
Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 38 | 38 (38) | Edge 13 | 25 | 9.1 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 38 | 38.0 (38) | Nicht unterstützt | 25 | 9.3 |
See also
<img>-Element