# 133: Zisťovanie responzívnych obrázkov Triky CSS

Pravdepodobne som trochu zriedkavý v tom, že ma skôr bavilo snažiť sa držať krok s vecami reagujúcimi na obrázky. Je to zaujímavý problém, ktorý priniesol veľa zaujímavých riešení. Celá vec sa však začína hromadiť, keď už existujú oficiálne riešenia:

1. a priatelia
2. 

   Povedzme, že sme na obrazovke 1x. Pretože sme prehliadaču povedali, že budeme tieto obrázky používať tak veľké, ako len dokážeme (100% výrezu), „body prerušenia“, keď prehliadač obrázky vyklopí, sa stanú pri 1280px, 640px, a 320 pixelov, rovnaké presné veľkosti, aké sme povedali pre obrázky.

   Ak sme na obrazovke 2x, tieto „hraničné body“ sa znížia na polovicu (bez ohľadu na to, čo vlastne urobíme pre zväčšenie veľkosti týchto obrázkov) a budú mať 640px, 320px a 160px.

   Teraz povedzme, že používame rovnaké obrázky, ale vieme oveľa viac o našom rozložení stránky a použili sme niečo také:

   Tu hovoríme (s sizesatribútom), že ak je zobrazená oblasť 500 pixelov alebo menšia, chceme zobraziť obrázok so šírkou 250 pixelov. Ak je zobrazená oblasť širšia, zobrazte obrázok v šírke 500 pixelov.

   To by zodpovedalo CSS takto:

   img ( width: 500px; ) @media (max-width: 500px) ( img ( width: 250px; ) )

   Na obrazovke 1x získate vždy 320w (malý) obraz, ak je výrez široký 500px alebo menší, a vždy získate 640w (stredný) obraz, ak je výrez väčší. Veľký obrázok nikdy nezískate, pretože vám dá vedieť, že už nikdy nebudete potrebovať toľko pixelov.

   Na obrazovke Ona 2x získate vždy 640 x (stredný) obraz, keď je výrez 500px široký alebo menší (pretože si myslí, že potrebuje 500px pixelov a malý nestačí na 320px), a vždy získate 1280 W (veľký) obrázok, keď je zobrazená oblasť väčšia. Malý obrázok nikdy nezískate, pretože nikdy nestačí na pokrytie toho, čo ste povedali, že ho chcete vykresliť.

   Skutočná veľkosť

   Pamätajte, že skutočná veľkosť obrázka je stále na vás. Myslím si, že vo väčšine prípadov to robíte prostredníctvom CSS. A CSS vždy vyhráva. Čo si vyhlásiť, že bude vykreslený šírka obrazu bez ohľadu na to, čo sa stane sa srcsetaj sizestak. Týmto sa len stanoví, ktorý obrázok sa zobrazí.

   To je dôvod, prečo je atribút veľkostí trochu tvrdý. Povedzme, že máte niečo ako:

   .container ( width: 80%; ) .container article ( width: 50%; ) .container article img ( width: 33.33% )

   To nie je nič neobvyklé. Takže teraz, akú veľkosť použijete v sizesatribúte? To by bolo 13,33% (vynásobte ich všetky dohromady), pretože toto číslo musí byť relatívne k výrezu, nie ku kontajneru. A to nezohľadňuje okraje a výplne a podobne na týchto kontajneroch, takže je to len dohad. Myslím, že je to veľmi blízko v podkovách, ručných granátoch a atribútoch veľkostí.

   Potom povedzme, že príde mediálny dopyt a telo sa popri tom všetkom skutočne rozšíri na 75%. Musíte to vedieť, aby ste mohli upraviť, čo si myslíte, že bude vykreslená veľkosť obrázkov. Váš atribút veľkostí sa môže stať:

   sizes="(min-width: 500px) 8%, 13.33%"

   Potom to zopakujte pre každý dotaz na médium rozloženia, ktorý má vplyv na obrázky obsahu. Môže to byť trochu zložité.

   Praktické veľkosti?

   Mám podozrenie, že väčšina použití v reálnom svete bude používať niečo ako:

   Za predpokladu, že obrázky obsahu budú približne na polovici veľkosti okna prehliadača na veľkých obrazovkách a plnej veľkosti okna prehliadača na malých obrazovkách - nechajte len hraničné body, nech sa stanú. Týmto spôsobom budete mať celkom slušnú voľbu bez toho, aby ste sa otrokovali nad presným vyhovovaním všetkých svojich mediálnych otázok.

   A pamätajte, že toto sú obrázky obsahu. HTML má tendenciu trvať dlhšie ako CSS alebo JS, najmä ak je jeho obsah.

   Ďalšie informácie

   Môžete tiež určiť, či je obrázok 2x alebo 1x pomocou srcset. Skutočne jednoduchý prípad použitia teda môže byť:

   To samo o sebe je dosť užitočné. Nemiešajte to so špecifikovaním šírky. Ako hovorí Eric Portis:

   A ešte mi dovoľte zdôrazniť, že zatiaľ čo k zdrojom môžete pripojiť deskriptory rozlíšenia 1x / 2x, srcsetnamiesto wdeskriptorov sa zmiešajú 1x / 2x&w. Nepoužívajte obidve súčasne srcset. Naozaj.

   A pamätáte si, keď som povedal, že pôvodný obrázok bol jednoduchý? Nový môže byť taký jednoduchý, ale prvky vo vnútri tiež podporujú srcseta sizes. To znamená, že môžete byť veľmi konkrétni. Pridáva k tomu ďalšiu vrstvu:

   1. Vy rozhodujete o ktorom

      Odkazy

      • Článok Martina Wolfa, ktorý to inšpiroval
      • Picturefill je polyfill, ktorý chcete používať.
      • Článok Smashing Magazine o Picturefill 2.0 od Tima Wrighta
      • Eric Portis o tom, prečo existuje Srcset a veľkosti a čo rieši lepšie ako mediálne dotazy
      • Eric Portis s novými informáciami

      Prečítajte si testovaciu skrinku pera srcset a veľkosti od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.