Značka HTML <picture>


Příklad

Jak používat značku <picture>:

<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>

Definice a použití

Značka <picture>poskytuje webovým vývojářům větší flexibilitu při specifikování zdrojů obrázků.

Nejběžnější použití <picture>prvku bude pro umělecké směřování v responzivních designech. Namísto jednoho obrázku, který je zvětšený nebo zmenšený na základě šířky výřezu, lze navrhnout více obrázků, aby lépe vyplnily výřez prohlížeče.

Prvek <picture>obsahuje dva tagy: jeden nebo více tagů <source> a jeden tag <img> .

Prohlížeč vyhledá první prvek <source>, kde dotaz na média odpovídá aktuální šířce výřezu, a poté zobrazí správný obrázek (zadaný v atributu srcset). Element <img> je vyžadován jako poslední podřízený <picture>prvek prvku jako záložní možnost, pokud neodpovídá žádná ze zdrojových značek.

Tip: Prvek <picture>funguje „podobně“ jako <video> a <audio>. Nastavíte různé zdroje a první zdroj, který vyhovuje preferencím, je ten, který se používá.


Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která prvek plně podporuje.

Element
<picture> 38.0 13.0 38.0 9.1 25.0

Globální atributy

Značka <picture>také podporuje globální atributy v HTML .


Atributy události

Značka <picture>také podporuje atributy událostí v HTML .


Související stránky

HTML výukový program: HTML prvek <obrázek>

CSS návod: CSS responzivní design – obrázky