Sobes.tech
Middle

Který HTML tag pomáhá načítat různé obrázky pro různé rozlišení obrazovky?

sobes.tech AI

Odpověď od AI

V HTML se používá značka <picture> k načítání různých obrázků v závislosti na rozlišení obrazovky. Uvnitř ní lze uvést několik <source> s atributem media, který stanoví podmínky pro výběr obrázku, a značku <img> s náhradním obrázkem.

Příklad:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Příklad obrázku">
</picture>

V tomto příkladu si prohlížeč vybere large.jpg, pokud je šířka obrazovky 800px nebo více, medium.jpg při šířce od 400px do 799px, a small.jpg pro menší obrazovky.

Také pro jednoduché případy lze použít atribut srcset u značky <img>, kde se uvádějí různé obrázky s jejich velikostmi.