HTML <picture> tag

Definitie en gebruik

<picture> tag maakt het webontwikkelaars flexibeler bij het specificeren van afbeeldingsbronnen.

<picture> De meest voorkomende toepassing van het element is in responsieve ontwerp voor kunst richting. U kunt meerdere afbeeldingen ontwerpen om beter te vullen de browser viewport, in plaats van een afbeelding te vergroten of te verkleinen in verhouding tot de breedte van de viewport.

<picture> element bevat twee tags: een of meerdere <source> tag en een <img> tag.

De browser zoekt naar de eerste <source> element die overeenkomt met de media query en de huidige viewport breedte, vervolgens toont het de juiste afbeelding (gespecificeerd in de srcset eigenschap). Het <img> element fungeert als <picture> De laatste afgeleide element van het element is vereist, het wordt gebruikt als er geen source tag overeenkomt.

Tip:<picture> elementen werken op dezelfde manier als <video> en <audio> Soortgelijk. U kunt verschillende bronnen instellen, de eerste bron die past bij de voorkeur wordt gebruikt.

Zie ook:

HTML handleiding:HTML <picture> element

CSS handleiding:CSS responsive design - images

Example

<picture> Usage method of the tag:

<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="Flowers" style="width:auto;">
</picture>

Try it yourself

Global attributes

<picture> The tag also supports Global attributes in HTML.

event attributes

<picture> The tag also supports Event attributes in HTML.

Browser support

The numbers in the table indicate the first browser version to fully support this tag.

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