HTML prvek <obrázek>
Element HTML <picture>
umožňuje zobrazit různé obrázky pro různá zařízení nebo velikosti obrazovky.
Element <picture> HTML
Element HTML <picture>
poskytuje webovým vývojářům větší flexibilitu při specifikování zdrojů obrázků.
Prvek <picture>
obsahuje jeden nebo více <source>
prvků, z nichž každý prostřednictvím srcset
atributu odkazuje na jiné obrázky. Prohlížeč si tak může vybrat obrázek, který nejlépe odpovídá aktuálnímu zobrazení a/nebo zařízení.
Každý <source>
prvek má
media
atribut, který určuje, kdy je obrázek nejvhodnější.
Příklad
Zobrazit různé obrázky pro různé velikosti obrazovky:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Poznámka: Vždy určete <img>
prvek jako poslední podřízený prvek <picture>
prvku. Prvek <img>
používají prohlížeče, které prvek nepodporují <picture>
, nebo pokud se žádná ze <source>
značek neshoduje.
Kdy použít prvek obrázku
<picture>
Prvek má dva hlavní účely :
1. Šířka pásma
Pokud máte malou obrazovku nebo zařízení, není nutné načítat velký soubor obrázku. Prohlížeč použije první <source>
prvek s odpovídajícími hodnotami atributů a bude ignorovat kterýkoli z následujících prvků.
2. Podpora formátování
Některé prohlížeče nebo zařízení nemusí podporovat všechny formáty obrázků. Pomocí
<picture>
prvku můžete přidávat obrázky všech formátů a prohlížeč použije první formát, který rozpozná, a ignoruje kterýkoli z následujících prvků.
Příklad
Prohlížeč použije první formát obrázku, který rozpozná:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
Poznámka: Prohlížeč použije první <source>
prvek s odpovídajícími hodnotami atributů a ignoruje všechny následující <source>
prvky.
HTML značky obrázků
Tag | Description |
---|---|
<img> | Defines an image |
<map> | Defines an image map |
<area> | Defines a clickable area inside an image map |
<picture> | Defines a container for multiple image resources |
Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .