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á
mediaatribut, 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 .