{%hackmd anYwyN--TziyASUWcqP-Gw %} # Tvořím web A–Z 2: lekce 08 <span>12. 5. 2021 | 18:00 - 20:00 | Praha</span> Lekce 08 - Responzivní obrázky Jan Čuma --- # Základní nastavení responzivních obrázků - ve výchozím stavu nepřizpůsobují obrazký své rozměry rozměrům stránky: ```css= .image { width: 100%; } ``` - takto zajistíme, aby se obrázek přizpůsoboval velikosti svého rodiče (stránka, kontejner,...): ```css= .image { max-width: 100%; } ``` --- - vlastnost <code>max-width</code> nám zajístí, aby byl obrázek responzivní, ale nikdy nepřesáhl svou původní šířku: ```css= .image { max-width: 100%; /* zde může být i konkrétní max. šiřka v px*/ height: auto; } ``` ```htmlembedded= <img width="900" height="500" src="https://picsum.photos/900/500" /> <h1>Já nechci poskakovat</h1> ``` - pokud chceme prohlížeči říct, jaký prostor má pro obrázek vyhradit (např. v případě pomalého připojení), použijeme vlastnost CSS <code>height: auto</code> společně s HTML atributy <code>width</code> a <code>height</code> --- # Změny variant obrázků v různých šířkách displeje 1/4 ```htmlembedded= <img srcset="small.jpeg 250w, large.jpeg 1000w" src="small.jpeg" alt="Image" > ``` - prohlížeč sám rozhode, jakou variantu obrázku je vhodné zvolit - <code>w</code> deskriptor udává skutečnou šiřku (intrinsic width) obrázku --- # Změny variant obrázků v různých šířkách displeje 2/4 ```htmlembedded= <img srcset="small.jpeg 250w, large.jpeg 1000w" sizes="250px" src="small.jpeg" alt="Image" > ``` - <code>sizes</code> atribut nastaví velikost slotu (prostoru), do kterého se má obrázek vykreslit - pozor: atributy <code>sizes</code> a <code>srcset</code> spolu nemusí vždy korespondovat. Prohlížeč vždy rozhodne, jaký obrázek zobrazí --- # Změny variant obrázků v různých šířkách displeje 3/4 - můžeme přidat i podmínku: ```htmlembedded= <img srcset="small.jpeg 250w, large.jpeg 1000w" sizes="(max-width: 600px) 250px, 800px" src="small.jpeg" alt="Image" > ``` - pokud je šiřka okna menší než 600px, velikost slotu bude 250px, jinak 800px --- # Změny variant obrázků v různých šířkách displeje 4/4 - při testování je vždy dobré smazat cache v prohlížečí při obnově stránky (pravý klik + otevřené vývojářské nástroje)  --- # Změny variant obrázků v různých rozlišeních ```htmlembedded= <img srcset="mobile.png, mobile@2x.png 2x" src="mobile.png" alt="Image" > ``` - <code>x</code> deskriptor určuje použití obrázku pro různé poměry <code>device-pixel-ratio</code> - <code>device-pixel-ratio</code> - zjednodušeně jde o poměr, který určuje, kolik pixelů z obrazovky daného zařízení má být použito na vykreselení jednoho CSS pixelu --- # <code>picture</code> elemenet 1/2 ```htmlembedded= <picture> <source media="(max-width: 599px)" srcset="small.jpeg" > <source media="(min-width: 600px)" srcset="large.jpeg" > <img src="small.jpeg" alt="Image" > </picture> ``` - Element <code>picture</code> obsahuje žádný nebo více prvků <code>source</code> a jeden <code>img</code> element, který nabízí různé verze obrázku pro různá zobrazení / zařízení - Element <code>source</code> určuje různé zdroje médií --- # <code>picture</code> elemenet 2/2 ```htmlembedded= <picture> <source media="(min-resolution: 192dpi)" srcset="large.jpeg" > <img src="small.jpeg" alt="Image" > </picture> ``` - atribut <code>media</code> můžeme použít i pro různá rozlišení obrazovky --- # Zadání dalšího úkolu 1. použijte na stránce alespoň 5 svg obrázků nebo ilustrací (https://undraw.co/illustrations) 2. animujte alespoň 2 svg jakýmkoliv vybraným způsobem 3. využijte responzivní obrázky alespoň ve 2 případech 4. vylaďte styl vašich stránek, aby byl prezentovatelný přes Github pages --- # Konec <span>12. 5. 2021 | 18:00 - 20:00 | Praha</span> Lekce 08 - Responzivní obrázky Jan Čuma