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