<picture>

Diese Übersetzung ist unvollständig. Bitte helfen Sie uns, diesen Artikel aus dem Englischen zu übersetzen

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>

 

Spezifikation

Spezifikation Status Kommentar
HTML Living Standard
Die Definition von '<picture>' in dieser Spezifikation.		 Lebender Standard Initial definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
pictureChrome Vollständige Unterstützung 38Edge Vollständige Unterstützung 13Firefox Vollständige Unterstützung 38
Vollständige Unterstützung 38
Keine Unterstützung 32 — 52
Deaktiviert
Deaktiviert From version 32 until version 52 (exclusive): this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 25Safari Vollständige Unterstützung 9.1WebView Android Vollständige Unterstützung 38Chrome Android Vollständige Unterstützung 38Firefox Android Vollständige Unterstützung 38
Vollständige Unterstützung 38
Keine Unterstützung 32 — 52
Deaktiviert
Deaktiviert From version 32 until version 52 (exclusive): this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 25Safari iOS Vollständige Unterstützung 9.3Samsung Internet Android Vollständige Unterstützung 3.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.

Siehe auch