HTML <picture> Tag

Definition und Verwendung

<picture> Tags bieten Webentwicklern mehr Flexibilität bei der Angabe von Bildressourcen.

<picture> Die häufigste Verwendung des Elements ist in der responsiven Gestaltung für die künstlerische Richtung. Man kann mehrere Bilder gestalten, um den Browser-Viewport besser auszufüllen, anstatt ein Bild nach der Breite des Viewports proportional zu vergrößern oder zu verkleinern.

<picture> Elementen enthalten zwei Tags: eine oder mehrere <source>-Tag und einem <img>-Tag.

Der Browser sucht nach dem ersten <source>-Element, das der aktuellenViewport-Breite entspricht, und zeigt dann das richtige Bild an (wie im srcset-Attribut angegeben). Das <img>-Element dient als <picture> Der letzte Kindknoten des Elements ist obligatorisch und wird als Backup-Option verwendet, wenn keine source-Elemente passen.

Hinweis:<picture> funktioniert, ähnlich wie <video> und <audio> Ähnlich. Sie können verschiedene Quellen einstellen, und die erste Quelle, die den Vorlieben entspricht, wird verwendet.

Bitte beachten Sie:

HTML-Tutorial:HTML <picture> Element

CSS-Tutorial:CSS Responsive Design - Bilder

Beispiel

<picture> Verwendung des Tags:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Blumen" style="width:auto;">
</picture>

Versuchen Sie es selbst

Globale Attribute

<picture> Der Tag unterstützt auch Globale Attribute in HTML.

Ereignisattribute

<picture> Der Tag unterstützt auch Ereignisattribute in HTML.

Browserunterstützung

Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der diesen Tag vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0