Middle

Aký HTML tag pomáha načítať rôzne obrázky pre rôzne rozlíšenia obrazovky?

sobes.tech AI

Odpoveď od AI

V HTML sa používá značka <picture> pro 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="Príklad obrázka">
</picture>

V tomto príklade si prehliadač vyberie large.jpg, ak je šírka obrazovky 800px alebo viac, medium.jpg pri šírke od 400px do 799px, a small.jpg pre menšie obrazovky.

Tiež pre jednoduché prípady možno použiť atribút srcset v značke <img>, kde sa uvádzajú rôzne obrázky s ich veľkosťami.

Predchádzajúce Ďalej