# 133: tundlike piltide väljaselgitamine - CSS-trikid

Ma olen ilmselt natuke haruldane selle poolest, et mulle meeldis pigem reageerivate piltidega sammu pidada. See on huvitav probleem, mis tõi palju huvitavaid lahendusi. Kogu asi hakkab nüüd aga kokku jooksma, nüüd, kui ametlikud lahendused on:

1. ja sõbrad
2. 

   Oletame, et oleme 1x ekraanil. Kuna oleme brauserile öelnud, et hakkame neid pilte kasutama nii suureks kui võimalik (100% vaateavast), toimuvad brauseri piltide väljalülitamise „murdepunktid” kiirusel 1280 pikslit, 640 pikslit, ja 320px, samad täpsed suurused, nagu oleme piltidele öelnud.

   Kui me oleme 2x ekraanil, lõikuvad need „katkestuspunktid“ pooleks (olenemata sellest, mida me nende piltide suuruseks tegelikult teeme) ja on 640 pikslit, 320 pikslit ja 160 pikslit.

   Oletame, et kasutame samu pilte, kuid teame oma lehe paigutusest palju rohkem ja kasutasime midagi sellist:

   Siinkohal ütleme (koos sizesatribuudiga), kui vaateakna suurus on 500 pikslit või väiksem, kavatseme pilti kuvada laiusega 250 pikslit. Kui vaateava on sellest laiem, kuvage pilti laiusega 500 pikslit.

   See sobiks CSS-iga järgmiselt:

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

   1x ekraanil saate alati 320w (väikese) pildi, kui vaateava on 500px lai või väiksem, ja 640w (keskmise) pildi saate alati, kui vaateava on suurem. Te ei saa kunagi suurt pilti, sest see võib öelda, et teil pole kunagi nii palju piksleid vaja.

   2x ekraan, saate alati 640w (keskmise) pildi, kui vaateakna laius on 500 pikslit või väiksem (kuna see arvab, et see vajab 500 pikslit ja väikesest ei piisa 320 pikslist) ning saate alati 1280w (suur) pilt, kui vaateava on suurem. Te ei saa kunagi väikest pilti, sest kunagi pole piisavalt piksleid, et katta seda, mida olete talle öelnud ja kavatsete pildi renderdada.

   Tegelik suuruse määramine

   Pidage meeles, et pildi tegelik suurus on endiselt teie otsustada. Ma arvan, et enamikul juhtudel teete seda CSS-i kaudu. Ja CSS võidab alati. Seal deklareeritav on pildi renderdatud laius, olenemata sellest, mis srcsetja sizesmillisega juhtub . Nii saab lihtsalt aru, millist pilti näidatakse.

   See muudabki suuruste atribuudi pisut karmiks. Oletame, et teil on midagi sellist:

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

   See pole üldse ebatavaline. Mis suurust sa siis sizesatribuudis kasutad ? See oleks 13,33% (korrutades need kõik kokku), sest see arv peab olema vaateava, mitte konteineri suhtes. Ja see ei võta arvesse nende konteinerite veeriseid ja polstrit ning muud, nii et see on omamoodi oletus. Ma arvan, et hobuseraudades, käsigranaatides ja suuruste atribuudis on lähedane arv.

   Oletame siis, et meediumipäring tuleb ja keha kõige selle peale laieneb tegelikult 75%. Peate seda teadma, et saaksite kohandada piltide renderdatud suurust. Teie suuruste atribuut võib muutuda:

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

   Seejärel vaadake see uuesti läbi kõigi teie kujundusmeediumipäringute puhul, mis mõjutavad sisupilte. See võib natuke keeruliseks muutuda.

   Praktilised suurused?

   Ma arvan, et enamikus reaalses maailmas kasutatavates asjades kasutatakse midagi sellist:

   Eeldades, et sisupildid on suurtel ekraanidel umbes poole brauseriakna ja väikestel ekraanidel brauseriakna suuruse suurusega - laske murdepunktidel lihtsalt juhtuda seal, kus need juhtuvad. Sellisel viisil saate ikkagi üsna korraliku valiku, ilma et oleksite kõigist meediumipäringutest täpselt vastanud.

   Ja pidage meeles, et need on sisupildid. HTML kipub kestma kauem kui CSS või JS, eriti kui see on sisu.

   Muud teadmised

   Samuti saate srcsetiga määrata, kas pilt on 2x või 1x. Nii et tõeliselt lihtne kasutusjuht võib olla:

   Juba see on üsna kasulik. Ärge segage seda täpsustavate laiustega. Nagu Eric Portis ütleb:

   Ja lubage mul veel kord rõhutada, et kuigi allikatele saate lisada kirjeldajate srcsetasemel 1x / 2x eraldusvõimega wkirjeldajaid, ei segune 1x / 2x ja w. Ärge kasutage mõlemat korraga srcset. Tõesti.

   Ja mäletate, kui ütlesin, et algne pilditäide oli lihtne? Uus võib olla nii lihtne, kuid sees olevad elemendid toetavad ka srcsetja sizes. See tähendab, et saate väga konkreetseks saada. See lisab sellele veel ühe kihi:

   1. Teie otsustate, milline

      Lingid

      • Martin Wolfi artikkel, mis seda inspireeris
      • Pilditäide on polüfill, mida soovite kasutada.
      • Tim Wrighti ajakirja Smashing artikkel Picturefill 2.0-s
      • Eric Portis selle kohta, miks Srcset ja suurused eksisteerivad ning mida see meediaküsimustega paremini lahendab
      • Eric Portis uue kohta

      Vaadake CodePenilt Chris Coyieri (@chriscoyier) pliiatsi Pliiats srcset & dyded