# 133: Разбиране на отзивчиви изображения - CSS-трикове

Вероятно съм малко рядък, тъй като по-скоро ми харесваше да се опитвам да продължавам с отзивчивите изображения. Това е интересен проблем, който породи много интересни решения. Цялото нещо започва да приключва сега, сега, когато официалните решения са:

1. и приятели
2. 

   Да кажем, че сме на 1x екран. Тъй като казахме на браузъра, че ще използваме тези изображения колкото е възможно по-големи (100% от прозореца за гледане), „точките на прекъсване“ за това кога браузърът ще обърне изображенията ще се случат при 1280px, 640px, и 320px, същите точни размери, както казахме, че изображенията са.

   Ако сме на 2x екран, тези „точки на прекъсване“ ще се намалят наполовина (независимо какво всъщност правим, за да оразмерим тези изображения) и ще бъдат на 640px, 320px и 160px.

   Сега да кажем, че използваме едни и същи изображения, но знаем много повече за оформлението на нашата страница и използвахме нещо подобно:

   Тук казваме (с sizesатрибута), ако видимостта е 500px или по-малка, възнамеряваме да покажем изображението с ширина 250px. Ако прозорецът за гледане е по-широк от това, покажете изображението с ширина 500px.

   Това би съответствало на CSS по следния начин:

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

   На 1x екран винаги ще получите 320w (малко) изображение, когато прозорецът за гледане е широк 500px или по-малък, и винаги ще получите изображение 640w (средно), когато viewport е по-голям. Никога няма да получите голямото изображение, защото може да каже, че никога няма да имате нужда от толкова много пиксели.

   На 2x екран винаги ще получите 640w (средно) изображение, когато екранът за гледане е с ширина 500px или по-малък (защото смята, че се нуждае от 500px пиксели, а малкият не е достатъчен при 320px) и винаги ще получите 1280w (голямо) изображение, когато прозорецът за показване е по-голям. Никога няма да получите малкото изображение, защото никога няма достатъчно пиксели, за да покрие това, което сте му казали, че възнамерявате да изобразите изображението.

   Действително оразмеряване

   Не забравяйте, че действителното оразмеряване на изображението все още зависи от вас. Мисля, че в повечето случаи вие го правите чрез CSS. И CSS винаги печели. Това, което декларирате, ще бъде визуализираната ширина на изображението, независимо какво се случва с srcsetи други sizesнеща. Това просто решава кое изображение ще бъде показано.

   Това е, което прави атрибута за размери малко труден. Да предположим, че имате нещо като:

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

   Това изобщо не е необичайно. И така, какъв размер използвате в sizesатрибута? Това би било 13,33% (умножете ги всички заедно), тъй като този брой трябва да е по отношение на прозореца за гледане, а не на контейнера. И това не взема предвид полетата и подплънките и други неща върху тези контейнери, така че е нещо като предположение. Предполагам, че броят отблизо е в подкови, ръчни гранати и атрибут за размери.

   Тогава да кажем, че се появява медийна заявка и тялото всъщност става 75% широко на всичко отгоре. Трябва да знаете това, за да можете да коригирате какъв според вас ще бъде размерът на изобразените изображения. Атрибутът ви за размери може да стане:

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

   След това преминете отново за всяка заявка за медийно оформление, която имате, която засяга изображенията на съдържанието. Може да стане малко сложно.

   Практически размери?

   Подозирам, че повечето реални потребители ще използват нещо като:

   Ако приемем, че съдържателните изображения ще бъдат около половината от размера на прозореца на браузъра на големи екрани и пълния размер на прозореца на браузъра на малките екрани - просто оставете точките на прекъсване да се случат там, където се случват. Все още ще получите доста приличен избор по този начин, без да отхвърляте точното съвпадение на всички ваши медийни заявки.

   И не забравяйте, че това са изображения със съдържание. HTML има тенденция да трае по-дълго от CSS или JS, особено когато е съдържание.

   Други неща, които трябва да знаете

   Можете също така да зададете дали изображението е 2x или 1x с srcset. Така че наистина опростен случай на употреба може да бъде:

   Само това е доста полезно. Не го смесвайте с посочване на ширини. Както казва Ерик Портис:

   И отново нека подчертая, че докато можете да прикачите дескриптори с разделителна способност 1x / 2x към източници srcsetвместо wдескриптори, 1x / 2x & w не се смесват. Не използвайте и двете в едно и също srcset. Наистина ли.

   И помните ли, когато казах, че оригиналното попълване на картини е лесно? Новото може да е толкова лесно, но елементите вътре също поддържат srcsetи sizes. Това означава, че можете да получите много конкретни. Той добавя още един слой към това:

   1. Вие решавате кой

      Връзки

      • Статията на Мартин Улф, която вдъхнови това
      • Picturefill е полифилът, който искате да използвате.
      • Разбиваща статия на списание за Picturefill 2.0 от Тим ​​Райт
      • Ерик Портис за това защо съществува Srcset и размерите и какво решава по-добре от медийните заявки
      • Ерик Портис с повече за новото

      Вижте тестовия случай на srcset и размери на Pen от Chris Coyier (@chriscoyier) на CodePen.