<picture> Tag - Flexibel Bilder einbinden
Beispiel:
<picture>
<source media="(min-width: 800px)" srcset="a_welli.jpg">
<source media="(min-width: 465px)" srcset="a_welli_xs.jpg">
<img src="a_welli_xs.jpg" alt="Wellis" style="width:auto;">
</picture>
Verwendung
Mit dem picture Tag können Bilder flexibler in responsive Designs eingebunden werden. So können z.B. auf kleinen Bildschirmen kleinere Bilder angegeben und geladen werden.
Innerhalb des picture Tags wird ein Bild mit img Tag eingebunden, die anderen Bilder mittels des source Tags. Die Bilder werden im source Tag mit dem srcset Attrribut
festgelegt. Die Einstellungen können im media Attribut anolog wie im CSS-Code festgelegt werden.