Ihre Suchergebnisse

    <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,