# 133: Ugotavljanje odzivnih slik - CSS-triki

Verjetno sem nekoliko redek, ker sem raje poskušal nadaljevati z odzivnimi slikami. Zanimiv problem je, da je prišlo do veliko zanimivih rešitev. Vse skupaj se začenja zaključevati zdaj, zdaj ko so uradne rešitve:

1. in prijatelji
2. 

   Recimo, da smo na 1x zaslonu. Ker smo brskalniku povedali, da bomo te slike uporabljali, kolikor je le mogoče (100% vidnega polja), se bodo "prelomne točke", kdaj brskalnik odvrne slike, zgodile pri 1280px, 640px, in 320 slikovnih pik, enakih velikosti, kot smo jim povedali, so slike.

   Če smo na 2x zaslonu, se bodo te "prelomne točke" prepolovile (ne glede na to, kaj dejansko naredimo za velikost teh slik) in bodo znašale 640px, 320px in 160px.

   Zdaj recimo, da uporabljamo iste slike, vendar vemo veliko več o postavitvi naše strani in smo uporabili nekaj takega:

   Tu pravimo (z sizesatributom), če je prikazno okno 500 px ali manj, nameravamo sliko prikazati v širini 250 px. Če je okno za ogled širše od tega, sliko prikažite v širini 500 slikovnih pik.

   To bi se ujemalo s CSS, kot je ta:

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

   Na zaslonu 1x boste vedno dobili 320w (majhno) sliko, če je okno za ogled široko 500 px ali manj, sliko 640w (srednje) pa boste vedno dobili, če je okno večje. Velike slike ne boste nikoli dobili, ker lahko ugotovi, da nikoli ne boste potrebovali toliko slikovnih pik.

   Na zaslonu Ona 2x boste vedno dobili sliko 640 w (srednje), če je prikazno okno široko 500 px ali manjše (ker meni, da potrebuje 500 slikovnih pik, majhno pa pri 320 slikovnih pikah), in vedno boste dobili 1280w (velika) slika, če je okno za ogled večje. Majhne slike ne boste nikoli dobili, ker nikoli ni dovolj slikovnih pik, da pokrije tisto, kar ste ji povedali, da nameravate sliko upodobiti.

   Dejanska velikost

   Ne pozabite, da je dejanska velikost slike še vedno odvisna od vas. Mislim, da v večini primerov to počnete prek CSS. In CSS vedno zmaga. Kaj boste razglasi bo biti opravljene širina slike ne glede na to, kaj se zgodi z srcsetin sizesstvari. To samo določi, katera slika bo prikazana.

   Zaradi tega je atribut velikosti nekoliko težek. Recimo, da imate nekaj takega:

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

   To sploh ni nenavadno. Torej, kakšno velikost uporabljate v sizesatributu? To bi bilo 13,33% (pomnožite jih vse skupaj), ker mora biti to število glede na prikazno območje in ne na vsebnik. In to ne upošteva robov, oblazinjenja in stvari na teh posodah, zato je nekako ugibanje. Predvidevam, da natančno šteje podkve, ročne granate in atribut velikosti.

   Potem recimo, da se pojavi medijska poizvedba in telo poleg tega dejansko postane 75% široko. To morate vedeti, da lahko prilagodite, kakšna se vam zdi upodobljena velikost slik. Atribut velikosti lahko postane:

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

   Nato ponovite to za vsako poizvedbo o postavitvi medija, ki vpliva na slike vsebine. Lahko postane nekoliko zapleteno.

   Praktične velikosti?

   Sumim, da bo večina uporabe v resničnem svetu uporabila nekaj takega:

   Ob predpostavki, da bodo slike z vsebinami približno polovice velikosti okna brskalnika na velikih zaslonih in polne velikosti okna brskalnika na majhnih zaslonih - samo pustite, da se prelomne točke zgodijo tam, kjer se zgodijo. Na ta način boste še vedno dobili precej spodobno izbiro, ne da bi se izognili natančnemu ujemanju vseh vaših medijskih poizvedb.

   In ne pozabite, da gre za vsebinske slike. HTML ponavadi traja dlje kot CSS ali JS, še posebej, če je vsebina.

   Druge stvari, ki jih je treba vedeti

   S srcset lahko določite tudi, ali je slika 2x ali 1x. Tako preprost primer uporabe je lahko:

   Že to je zelo koristno. Ne mešajte ga z navedbo širine. Kot pravi Eric Portis:

   In še enkrat naj poudarim, da čeprav lahko na vire srcsetnamesto wdeskriptorjev pritrdite deskriptorje ločljivosti 1x / 2x, se 1x / 2x & w ne mešata. Ne uporabljajte obeh v istem srcset. Res.

   In se spomnite, ko sem rekel, da je prvotno polnjenje slik enostavno? Novo je lahko tako enostavno, toda tudi elementi v notranjosti podpirajo srcsetin sizes. To pomeni, da lahko postanete zelo natančni. Temu doda še en sloj:

   1. Vi se odločite, katero

      Povezave

      • Članek Martina Wolfa, ki je to navdihnil
      • Picturefill je polifil, ki ga želite uporabiti.
      • Članek Smashing Magazine o programu Picturefill 2.0 avtorja Tima Wrighta
      • Eric Portis o tem, zakaj Srcset in velikosti obstajajo in kaj rešuje bolje kot medijska vprašanja
      • Eric Portis z več o novem

      Oglejte si testni primerek Pen srcset & sizes Chrisa Coyierja (@chriscoyier) na CodePen.