O elementu picture v Ostravě

{{Frontendisti.cz} @robinpokorny

foto.jpg 3264 × 2448

<img src="foto.jpg" />

<img src="foto.jpg" width="1024" />

foto-1024.jpg 1024 × 768

1024

<img src=“foto-1024.jpg" />

<img src=“foto-1920.jpg” class=“on-hd” /> <img src=“foto-1024.jpg” class=“on-lg” /> <img src=“foto-640.jpg” class=“on-sm” /> <img src=“foto-320.jpg” class=“on-xs” />

img { width: 100% }; !

.on-lg { display: none; } !

… !

@media (min-width: 1400px) { .on-lg { display: block; } }

Velikost obrazovky

Velikost obrázku na stránce

Jemnost displeje

Fyzické rozměry obrázku

vývojář

Velikost obrazovky

Velikost obrázku na stránce

Jemnost displeje

Fyzické rozměry obrázku

sizes

srcset

<img src=“foto-320.jpg” !

srcset=“foto-1920.jpg 1920w, foto-1024.jpg 1024w, foto-640.jpg 640w, foto-320.jpg 320w” !

sizes=“(min-width: 800px) 25vw, 100vw” />

ericportis.com

srcset=“( [url] [integer]w, )+"

fyzická šířka v pixelech

srcset=“( [url] [float]x, )+"

pixel density (0.25x, 0.5x, 1x, 2x, 4x)( )Pozor! Odlišný význam od starší specifikace.

sizes=“( [media query] [length], )* [length]"

první vyhovující, nebo

px em vw rem in calc(50vw - 2em)

sizes=“( [media query] [length], )* [length]"

<img src=“foto-320.jpg” !

srcset=“foto-1920.jpg 1920w, foto-1024.jpg 1024w, foto-640.jpg 640w, foto-320.jpg 320w” !

sizes=“(min-width: 800px) 25vw, 100vw” />

<picture> ?

<img class=“on-hd” srcset=“charizard-hd.jpg 1920w, …”> !

<img class=“on-lg” srcset=“charmeleon-hd.jpg 1680w, …”> !

<img class=“on-sm” srcset=“charmander-hd.jpg 800w, …”>

<source media="(min-width: 1200px)" srcset=“charizard-hd.jpg 1920w, …”> !

<source media="(min-width: 40em)" srcset=“charmeleon-hd.jpg 1680w, …”> !

<img src=“charmander.jpg" srcset=“charmander-hd.jpg 800w, …”>

<picture>

</picture>

<source media="(min-width: 1200px)" srcset=“charizard-hd.jpg 1920w, …”> !

<source media="(min-width: 40em)" srcset=“charmeleon-hd.jpg 1680w, …”> !

<img src=“charmander.jpg" srcset=“charmander-hd.jpg 800w, …”>

<picture>

</picture>

musí být poslední

epický fallback

může mít sizes (i v source)

class zde

a jiné

@robinpokornyrobinpokorny.com

@robinpokornyrobinpokorny.com

Trenér Mega Charizarda X

Nabízí Charmandera za Bulbasaura

pokebal.png 300w