Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

<picture>

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 Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der 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>

Specifications

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

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 38 38 (38) Edge 13 25 Nicht unterstützt
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 38 38.0 (38) Nicht unterstützt 25 Nicht unterstützt

See also

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: ViciousPecan
 Zuletzt aktualisiert von: ViciousPecan,