HTML <afbeelding> -tag
Voorbeeld
Hoe de <foto>-tag te gebruiken:
<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>
Definitie en gebruik
De <picture>tag geeft webontwikkelaars meer flexibiliteit bij het specificeren van afbeeldingsbronnen.
Het meest gebruikelijke gebruik van het <picture>element is voor art direction in responsieve ontwerpen. In plaats van één afbeelding te hebben die omhoog of omlaag wordt geschaald op basis van de breedte van de viewport, kunnen meerdere afbeeldingen worden ontworpen om de viewport van de browser mooier te vullen.
Het <picture>element bevat twee tags: een of meer
<source> tags en een <img> tag.
De browser zoekt naar het eerste <source>-element waar de mediaquery overeenkomt met de huidige viewport-breedte, en geeft vervolgens de juiste afbeelding weer (opgegeven in het srcset-attribuut). Het <img>-element is vereist als het laatste onderliggende element van het <picture>element, als een terugvaloptie als geen van de brontags overeenkomt.
Tip: Het <picture>element werkt "vergelijkbaar" met <video> en <audio>. Je stelt verschillende bronnen in, en de eerste bron die past bij de voorkeuren is degene die wordt gebruikt.
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die het element volledig ondersteunt.
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Algemene kenmerken
De <picture>tag ondersteunt ook de Global Attributes in HTML .
Gebeurteniskenmerken
De <picture>tag ondersteunt ook de Event Attributes in HTML .
Gerelateerde pagina's
HTML-zelfstudie: HTML <afbeelding>-element
CSS-zelfstudie: CSS Responsive Design - Afbeeldingen