# 133: Откривање одзивних слика - ЦСС-трикови

Вероватно сам помало ретка у томе што сам радије уживала покушавајући да наставим са реагујућим сликама. Занимљив је проблем који је изнедрио мноштво занимљивих решења. Све то почиње да се завршава сада, сада када су званична решења:

1. и пријатељи
2. 

   Рецимо да смо на 1к екрану. Будући да смо претраживачу рекли да ћемо ове слике користити што је могуће веће (100% оквира за приказ), „тачке прекида“ када ће прегледач преокренути слике догодиће се при 1280пк, 640пк, и 320 пиксела, истих тачних величина као што смо рекли и да су слике.

   Ако се налазимо на 2к екрану, те „тачке прекида“ ће се преполовити (без обзира на то шта заправо радимо да бисмо величине тих слика) и износиће 640пк, 320пк и 160пк.

   Сада рецимо да користимо исте слике, али знамо много више о изгледу наше странице и користили смо нешто попут овог:

   Овде кажемо (са sizesатрибутом), ако је оквир за приказ 500 пиксела или мањи, намеравамо да прикажемо слику ширине 250 пиксела. Ако је оквир за приказ шири од тога, прикажите слику ширине 500 пиксела.

   То би се поклапало са ЦСС-ом овако:

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

   На 1к екрану увек ћете добити слику од 320в (мала) када је оквир за приказ широк 500 пк или мањи, а слику од 640в (средњу) увек ћете добити када је оквир за приказ већи. Никада нећете добити велику слику, јер може рећи да вам никада неће требати толико пиксела.

   На екрану од 2к, увек ћете добити 640в (средњу) слику када је оквир за приказ широк 500 пк или мањи (јер сматра да му треба 500 пиксела, а мали није довољан при 320 пиксела), а увек ћете добити 1280в (велика) слика када је оквир за приказ већи. Никада нећете добити малу слику, јер никад нема довољно пиксела да покрије оно што сте јој рекли да намеравате да је прикажете.

   Стварно димензионисање

   Запамтите да је стварна величина слике и даље на вама. Мислим да у већини случајева то радите путем ЦСС-а. А ЦСС увек побеђује. Оно што прогласите биће приказана ширина слике без обзира на то шта се деси са 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%"

   Затим то поново прегледајте за сваки упит медија за изглед који утиче на слике садржаја. Може постати мало сложено.

   Практичне величине?

   Претпостављам да ће већина стварног света користити нешто попут:

   Под претпоставком да ће слике са садржајем бити приближно половине величине прозора прегледача на великим екранима и пуне величине прозора прегледача на малим екранима - само пустите да се тачке прекида дешавају тамо где се догоде. На овај начин ћете и даље добити прилично пристојан избор, а да не умањите тачност подударања свих ваших медијских упита.

   И запамтите да су ово слике са садржајем. ХТМЛ има тенденцију да траје дуже од ЦСС-а или ЈС-а, посебно када је садржај.

   Остале ствари које треба знати

   Такође можете одредити да ли је слика 2к или 1к са срцсет. Тако заиста једноставан случај употребе може бити:

   Само то је прилично корисно. Не мешајте га са одређивањем ширине. Као што каже Ериц Портис:

   И опет дозволите ми да нагласим да, иако можете изворима приложити дескрипторе 1к / 2к резолуције srcsetуместо wдескриптора, 1к / 2к & в се не мешају. Не користите обоје у истом srcset. Стварно.

   И сјећате се кад сам рекао да је оригинално попуњавање слика лако? Ново може бити тако лако, али елементи изнутра такође подржавају srcsetи sizes. То значи да можете бити врло прецизни. Овоме додаје још један слој:

   1. Ви одлучите који

      Везе

      • Чланак Мартина Волфа који је ово инспирисао
      • Пицтурефилл је полифил који желите да користите.
      • Чланак Смасхинг Магазина на Пицтурефилл 2.0, Тим Вригхт
      • Ериц Портис о томе зашто Срцсет и величине постоје и шта то решава боље од медијских упита
      • Ериц Портис са више о новом

      Погледајте тест примера оловке и величине Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.