Der Inhalt dieser Seite wurde von der Community übersetzt, jedoch wird er nicht mehr aktiv gepflegt und kann daher veraltet sein. Wenn du mithelfen möchtest, kannst du hier herausfinden wie deaktivierte Übersetzungen reaktiviert werden können.

<picture>

Das HTML-Element <picture> ist ein Container, der zur Angabe mehrerer <source> (en-US)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> (en-US)-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 (en-US)

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> (en-US)-Element auszuwählen. Wenn ein Media Query zu false evaluiert, wird das <source> (en-US)-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> (en-US) angegeben sind. Wenn der User Agent den angegebenen Typ nicht unterstützt, wird das <source> (en-US)-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

BCD tables only load in the browser

Siehe auch