HTML <Bild> -Tag
Beispiel
So verwenden Sie das <picture>-Tag:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Definition und Verwendung
Das <picture>Tag gibt Webentwicklern mehr Flexibilität bei der Angabe von Bildressourcen.
Die häufigste Verwendung des <picture>Elements ist die Art Direction in responsiven Designs. Anstatt ein Bild zu haben, das basierend auf der Breite des Ansichtsfensters vergrößert oder verkleinert wird, können mehrere Bilder so gestaltet werden, dass sie das Ansichtsfenster des Browsers besser ausfüllen.
Das <picture>Element enthält zwei Tags: ein oder mehrere
<source> -Tags und ein <img> -Tag.
Der Browser sucht nach dem ersten <source>-Element, bei dem die Medienabfrage mit der aktuellen Ansichtsfensterbreite übereinstimmt, und zeigt dann das richtige Bild an (angegeben im srcset-Attribut). Das <img>-Element ist als letztes untergeordnetes Element des <picture>Elements als Fallback-Option erforderlich, wenn keines der Quell-Tags übereinstimmt.
Tipp: Das <picture>Element funktioniert "ähnlich" wie <video> und <audio>. Sie richten verschiedene Quellen ein, und die erste Quelle, die den Einstellungen entspricht, wird verwendet.
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 |
Globale Attribute
Das <picture>Tag unterstützt auch die globalen Attribute in HTML .
Ereignisattribute
Das <picture>Tag unterstützt auch die Ereignisattribute in HTML .
Verwandte Seiten
HTML-Tutorial: HTML-<Bild>-Element
CSS-Tutorial: Responsives CSS-Design – Bilder