VSC + HTML + CSS
HTML source srcser Attribute
Vytvořím si veliký obrázek a nechám jej našítat s velikostí nastavenou na 100% (nebo menší). Tím dosáhnu toho, že je obrázek stále čitelný.
Nevýhodou tohoto řešení je skutečnost, že pro velký monitor mám obrázek ve velikosti FullHD nebo větší o nějakém datovém objemu, kdy tento obrázek je načítán v celém datovém objemu i pro tablet či mobilní telefon.
Pokud použiji tag <picture> mohu pomocí atributu srcser ovlivnit, který obrázek prohlížeč použije.
Znamená to, ale že budu mít jeden obrázek v několika verzích (různých rozlišeních).
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Změna obrázku dle rozlišení zobrazovacího zařízení</h2>
<p> Samotný prohlížeč si rozhoduje, který z obrázek použije pro dané rozlišení obrazovky.</p>
<p> informace musí být vložena v tagu <picture></p>
<h4>Pokud je rozlišení pod definovaným minimálním rozsahem použije se definice obrázku v samotném img</h4>
<picture>
<source media="(min-width:1920px)" srcset="001.svg">
<source media="(min-width:1200px)" srcset="002.svg">
<source media="(min-width:800px)" srcset="003.svg">
<img src="./003.svg" alt="3840x2160" style="width:100%;">
</picture>
</body>
</html>
ukázka fungování v HTML Atribut srcser
HTML kousky
width:calc()
Menu
Barvy u zátržítek a boxů
Accordion
Hodiny
Single page
Pricing card
Fluid Layout with Flex
HTML source srcser Attribute
Vytvořím si veliký obrázek a nechám jej našítat s velikostí nastavenou na 100% (nebo menší). Tím dosáhnu toho, že je obrázek stále čitelný.
Nevýhodou tohoto řešení je skutečnost, že pro velký monitor mám obrázek ve velikosti FullHD nebo větší o nějakém datovém objemu, kdy tento obrázek je načítán v celém datovém objemu i pro tablet či mobilní telefon.
Pokud použiji tag <picture> mohu pomocí atributu srcser ovlivnit, který obrázek prohlížeč použije.
Znamená to, ale že budu mít jeden obrázek v několika verzích (různých rozlišeních).
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Změna obrázku dle rozlišení zobrazovacího zařízení</h2>
<p> Samotný prohlížeč si rozhoduje, který z obrázek použije pro dané rozlišení obrazovky.</p>
<p> informace musí být vložena v tagu <picture></p>
<h4>Pokud je rozlišení pod definovaným minimálním rozsahem použije se definice obrázku v samotném img</h4>
<picture>
<source media="(min-width:1920px)" srcset="001.svg">
<source media="(min-width:1200px)" srcset="002.svg">
<source media="(min-width:800px)" srcset="003.svg">
<img src="./003.svg" alt="3840x2160" style="width:100%;">
</picture>
</body>
</html>
ukázka fungování v HTML Atribut srcser