HTML <picture> tag
Op deze pagina:
Voorbeeld:
<picture>
<source media="(min-width: 650px)" srcset="grote_bloemkool.jpg">
<source media="(min-width: 465px)" srcset="kleine_bloemkool.jpg">
<img src="bloemkool.jpg" alt="Bloemkool" style="width:auto;">
</picture>
De <picture> tag geeft ontwikkelaars de mogelijkheid om meerdere afbeeldingen op te geven waarvan dan diegene wordt getoond die het meest bij de schermgrootte van het apparaat van de gebruiker past. Afbeeldingen hoeven zo niet meer geschaald te worden.
Het <picture> element heeft twee verschillende tags: één of meer <source> tags en één <img> tag.
Het <source> element heeft de volgende attributen:
- srcset (verplicht)
- Geeft de URL van het te tonen plaatje.
- media
- De css voor de afbeelding.
- sizes
- Geeft een enkele breedte, of meerdere breedten met media queries.
- type
- Geeft het MIME type.
De browser zal het eerste plaatje tonen waarvan de attribuutwaarden voldoen, de overigen zullen worden genegeerd.
Het <img> element is verplicht als laatste kind tag van het <picture> declaratie blok.
Het <img> element wordt gebruikt door browsers die geen ondersteuning hebben voor het <picture> element of wordt gebruikt als geen van de overige <source> tags voldeden.