# 133: Atsaucīgu attēlu noteikšana - CSS-triki

Es droši vien esmu mazliet rets, jo man drīzāk patika mēģināt sekot līdzi atsaucīgo attēlu lietai. Tā ir interesanta problēma, kas radīja daudz interesantu risinājumu. Tomēr visa lieta tagad ir sākusies, tagad, kad oficiālie risinājumi ir:

1. un draugiem
2. 

   Pieņemsim, ka esam 1x ekrānā. Tā kā mēs pārlūkprogrammai esam teikuši, ka šos attēlus izmantosim tik lielus, cik vien iespējams (100% no skata loga), “pārrāvuma punkti”, kad pārlūkprogramma pārtrauks attēlus, notiks ar 1280 pikseļiem, 640 pikseļiem, un 320 pikseļi, tie paši precīzie izmēri, kādus mēs esam teikuši attēliem.

   Ja atrodamies 2x ekrānā, šie “pārtraukuma punkti” samazināsies uz pusi (neatkarīgi no tā, ko mēs faktiski darām, lai šos attēlus izmērītu) un tie būs 640 pikseļi, 320 pikseļi un 160 pikseļi.

   Pieņemsim, ka mēs izmantojam tos pašus attēlus, taču mēs daudz vairāk zinām par mūsu lapas izkārtojumu un izmantojām kaut ko līdzīgu šim:

   Šeit mēs sakām (ar sizesatribūtu), ja skata punkts ir 500 pikseļi vai mazāks, mēs domājam attēlu parādīt 250 pikseļu platumā. Ja skata laukums ir plašāks, attēlojiet attēlu 500 pikseļu platumā.

   Tas atbilstu šādam CSS:

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

   1x ekrānā jūs vienmēr saņemsiet 320w (mazu) attēlu, ja skata loga platums ir 500 pikseļi vai mazāks, un 640w (vidēju) attēlu vienmēr saņemsiet, kad skata punkts būs lielāks. Jūs nekad neiegūsit lielo attēlu, jo tas var pateikt, ka jums nekad nebūs vajadzīgs tik daudz pikseļu.

   2x ekrāns, jūs vienmēr saņemsit 640w (vidēju) attēlu, kad skata laukums ir 500 pikseļu plats vai mazāks (jo tas uzskata, ka tam nepieciešami 500 pikseļi pikseļu, un mazajam nepietiek ar 320 pikseļiem), un jūs vienmēr saņemsit 1280 w (liels) attēls, ja skata punkts ir lielāks. Jūs nekad neiegūsit mazo attēlu, jo nekad nav pietiekami daudz pikseļu, lai aptvertu to, ko esat teicis, un domājat attēlu renderēt.

   Faktiskais izmērs

   Atcerieties, ka faktiskais attēla izmērs joprojām ir atkarīgs no jums. Es domāju, ka lielākajā daļā gadījumu jūs to darāt, izmantojot CSS. Un CSS vienmēr uzvar. Tas, ko jūs paziņojat, būs attēla renderētais platums neatkarīgi no tā, kas notiek ar srcsetun citu sizes. Tas vienkārši izskaidro, kurš attēls tiks parādīts.

   Tas padara izmēru atribūtu mazliet grūtu. Pieņemsim, ka jums ir kaut kas līdzīgs:

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

   Tas nepavisam nav nekas neparasts. Tātad, kādu izmēru jūs izmantojat sizesatribūtā? Tas būtu 13,33% (reizinot tos visus kopā), jo šim skaitlim jābūt attiecībā pret skatu, nevis konteineru. Un tas neņem vērā rezervi un polsterējumu un sīkumus uz šiem konteineriem, tāpēc tas ir sava veida minējums. Es domāju, ka tuvs skaits pakavos, rokas granātās un izmēru atribūts.

   Tad pieņemsim, ka parādās multivides vaicājums, un virs tā visa ķermenis faktiski kļūst par 75% plats. Jums tas jāzina, lai jūs varētu pielāgot to, kāds, jūsuprāt, būs attēlu atveidotais izmērs. Jūsu izmēru atribūts var kļūt:

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

   Pēc tam vēlreiz pārbaudiet katru izkārtojuma multivides vaicājumu, kas ietekmē satura attēlus. Tas var kļūt nedaudz sarežģīts.

   Praktiskie izmēri?

   Man ir aizdomas, ka lielākā daļa reālās pasaules lietojumu izmantos kaut ko līdzīgu:

   Pieņemot, ka satura attēli būs aptuveni puse no pārlūka loga lieliem ekrāniem un pilna pārlūkprogrammas loga izmēri mazos ekrānos - vienkārši ļaujiet pārtraukuma punktiem notikt tur, kur tie notiek. Jūs joprojām saņemsit diezgan pienācīgu izvēli šādā veidā, nenovēršot visu savu multivides vaicājumu precīzu atbilstību.

   Un atcerieties, ka tie ir satura attēli. HTML mēdz ilgt ilgāk nekā CSS vai JS, it īpaši, ja tas ir saturs.

   Citas lietas, kas jāzina

   Varat arī norādīt, vai attēls ir 2x vai 1x ar srcset. Tātad patiešām vienkāršs lietošanas gadījums var būt:

   Tas vien ir diezgan noderīgi. Nejauciet to, norādot platumus. Kā saka Ēriks Portiss:

   Un vēlreiz ļaujiet man uzsvērt, ka, lai gan avotiem deskriptoru srcsetvietā varat pievienot 1x / 2x izšķirtspējas waprakstus, 1x / 2x & w nejaucas. Nelietojiet abus vienā un tajā pašā veidā srcset. Tiešām.

   Un atceraties, kad es teicu, ka sākotnējā attēla aizpildīšana bija vienkārša? Jaunais var būt tik vienkārši, bet iekšējie elementi arī atbalsta srcsetun sizes. Tas nozīmē, ka jūs varat iegūt ļoti specifisku. Tas tam pievieno vēl vienu slāni:

   1. Jūs izlemjat, kurš

      Saites

      • Martina Volfa raksts, kas to iedvesmoja
      • Picturefill ir polifill, kuru vēlaties izmantot.
      • Smashing Magazine raksts par Picturefill 2.0, Tim Wright
      • Ēriks Portiss par to, kāpēc pastāv Srcset un izmēri un ko tas atrisina labāk nekā multivides vaicājumi
      • Ēriks Portiss ar vairāk par jauno

      Skatiet Krisa Koijera (@chriscoyier) Pen srcset un izmēru testeri vietnē CodePen.