HTML <picture>Element

Beispiele

Verschiedene Bilder je nach unterschiedlicher Bildschirmgröße anzeigen; wenn keine Übereinstimmung gefunden wird oder der Browser das picture-Element nicht unterstützt, wird das img-Element verwendet:

<picture> <source media="(min-width: 650px)" srcset="demo1.jpg"> <source media="(min-width: 465px)" srcset="demo2.jpg"> <img src="img_girl.jpg"> </picture>

Selbst ausprobieren »

Definition

Das picture-Element ermöglicht es uns, verschiedene Bilder auf verschiedenen Geräten anzuzeigen, und wird im Allgemeinen für responsives Design verwendet.

HTML5 führte das <picture>-Element ein, das die Anpassung von Bildressourcen flexibler macht.

Das <picture>-Element enthält null oder mehr <source>-Elemente und ein <img>-Element. Jedes <source>-Element entspricht einem anderen Gerät und verweist auf eine andere Bildquelle. Wenn es keine Übereinstimmung gibt, wird die URL im src-Attribut des <img>-Elements ausgewählt.

Hinweis:<img>The element is placed after the last<picture>element; if the browser does not support this attribute, the image of the <img> element is displayed.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element vollständig unterstützt.

Element
<picture> 38.0 13.0 38.0 9.1 25.0

Unterschiede zwischen HTML 4.01 und HTML5

Das <picture>-Element ist neu in HTML5 definiert.

Globale Attribute

Das <picture>-Tag unterstütztdie globalen HTML-Attribute.。

Ereignisattribute

Das <picture>-Tag unterstütztdie HTML-Ereignisattribute.。

Andere Erweiterungen