Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

O elementu picture v Ostravě

942 views

Published on

Má Ostravská přednáška na {Frontendisti.cz}

Published in: Technology
  • Be the first to comment

O elementu picture v Ostravě

  1. 1. { {Frontendisti.cz} @robinpokorny
  2. 2. foto.jpg 3264 × 2448
  3. 3. <img src="foto.jpg" />
  4. 4. <img src="foto.jpg" width="1024" />
  5. 5. 1024 foto-1024.jpg 1024 × 768
  6. 6. <img src=“foto-1024.jpg" />
  7. 7. <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” />
  8. 8. img { width: 100% }; ! .on-lg { display: none; } ! … ! @media (min-width: 1400px) { .on-lg { display: block; } }
  9. 9. Velikost obrazovky Velikost obrázku na stránce Jemnost displeje Fyzické rozměry obrázku vývojář
  10. 10. Velikost obrazovky Velikost obrázku na stránce Jemnost displeje Fyzické rozměry obrázku sizes srcset
  11. 11. <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” />
  12. 12. ericportis.com
  13. 13. srcset=“( [url] [integer]w, )+" fyzická šířka v pixelech
  14. 14. ( srcset=“( [url] [float]x, )+" ) pixel density (0.25x, 0.5x, 1x, 2x, 4x) Pozor! Odlišný význam od starší specifikace.
  15. 15. sizes=“( [media query] [length], )* [length]" první vyhovující, nebo
  16. 16. sizes=“( [media query] [length], )* [length]" px em vw rem in calc(50vw - 2em)
  17. 17. <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” />
  18. 18. <picture> ?
  19. 19. <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, …”>
  20. 20. <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>
  21. 21. <picture> <source media="(min-width: 1200px)" musí být poslední srcset=“charizard-hd.jpg 1920w, …”> ! <source media="(min-width: 40em)" a jiné srcset=“charmeleon-hd.jpg 1680w, …”> ! <img src=“charmander.jpg" srcset=“charmander-hd.jpg 800w, …”> </picture> epický fallback může mít sizes (i v source) class zde
  22. 22. @robinpokorny robinpokorny.com
  23. 23. @robinpokorny robinpokorny.com Trenér Mega Charizarda X Nabízí Charmandera za Bulbasaura pokebal.png 300w

×