# 133: Reagoivien kuvien selvittäminen - CSS-temppuja

Olen luultavasti vähän harvinainen siinä mielessä, että mieluummin yritin pysyä mukana reagoivissa kuvissa. Se on mielenkiintoinen ongelma, joka tuotti paljon mielenkiintoisia ratkaisuja. Koko asia alkaa kuitenkin päättyä nyt, kun viralliset ratkaisut ovat:

1. ja kaverit
2. 

   Sano, että olemme 1x näytöllä. Koska olemme kertoneet selaimelle, että käytämme näitä kuvia niin suurina kuin mahdollista (100% näkymästä), "katkaisupisteet" sille, milloin selain kääntää kuvat, tapahtuvat 1280 kuvapisteen, 640 kuvapisteen, ja 320 kuvapistettä, samat tarkat koot kuin olemme kertoneet kuville.

   Jos olemme 2x-näytöllä, nämä "katkaisupisteet" puolittuvat (riippumatta siitä, mitä teemme näiden kuvien koon mukaan) ja ne ovat 640px, 320px ja 160px.

   Oletetaan nyt, että käytämme samoja kuvia, mutta tiedämme paljon enemmän sivuasettelustamme ja käytimme jotain tällaista:

   Tässä sanomme ( sizesattribuutin kanssa), jos näkymä on 500 kuvapistettä tai pienempi, aiomme näyttää kuvan 250 kuvapisteen levyisenä. Jos näkymä on sitä leveämpi, näytä kuva 500 kuvapisteen levyisenä.

   Se sopisi yhteen CSS: n kanssa näin:

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

   1x-näytöllä saat aina 320 watin (pienen) kuvan, kun näkymän leveys on vähintään 500 kuvapistettä, ja 640 watin (keskikoko) kuvan saa aina, kun näkymä on suurempi. Et koskaan saa suurta kuvaa, koska se voi kertoa, ettet koskaan tarvitse niin monta pikseliä.

   Ona 2x -näyttö, saat aina 640 watin (keskikokoisen) kuvan, kun näkymän leveys on vähintään 500 kuvapistettä (koska se luulee tarvitsevansa 500 kuvapistettä ja pieni ei riitä 320 kuvapisteen kohdalla), ja saat aina 1280 watin (suuri) kuva, kun näkymä on suurempi. Et koskaan saa pientä kuvaa, koska se ei ole koskaan tarpeeksi pikseliä peittämään sitä, mitä olet kertonut aiot tehdä kuvan.

   Todellinen mitoitus

   Muista, että kuvan todellinen mitoitus on edelleen sinun tehtäväsi. Luulisin, että useimmissa tapauksissa teet sen CSS: n kautta. Ja CSS voittaa aina. Se, mitä ilmoitat, on kuvan renderöity leveys riippumatta siitä, mitä srcsetja mitä tapahtuu sizes. Se vain selvittää, mikä kuva näytetään.

   Tämä tekee koot-attribuutista hieman kovan. Oletetaan, että sinulla on jotain:

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

   Se ei ole ollenkaan epätavallista. Joten nyt mitä kokoa käytät sizesmääritteessä? Se olisi 13,33% (kertomalla ne kaikki yhteen), koska luvun on oltava suhteessa näkymäikkunaan, ei säilöön. Ja siinä ei oteta huomioon marginaaleja, pehmusteita ja tavaraa näissä astioissa, joten se on eräänlainen arvaus. Luulen, että hevosenkengissä, käsikranaateissa ja koko-attribuutissa on läheinen määrä.

   Sanotaan sitten, että mediakysely tulee esiin ja runko tosiasiallisesti tulee 75% leveäksi kaiken tämän lisäksi. Sinun on tiedettävä se, jotta voit säätää kuvien renderoidun koon mielestäsi. Koko-attribuuttisi voi tulla:

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

   Käy sitten se läpi uudelleen jokaisella sinulla olevalla asettelumediakyselyllä, joka vaikuttaa sisältökuviin. Se voi olla hieman monimutkainen.

   Käytännölliset koot?

   Epäilen, että useimmat reaalimaailman käyttötavat käyttävät jotain:

   Olettaen, että sisältökuvien koko on noin puolet selainikkunan koosta suurilla näytöillä ja selainikkunan koko pienillä näytöillä - anna vain katkaisupisteiden tapahtua missä ne tapahtuvat. Saat silti melko kunnollisen valinnan tällä tavalla ilman, että tarvitset täsmää vastaamaan kaikkia mediakyselysi.

   Ja muista, että nämä ovat sisältökuvia. HTML kestää yleensä kauemmin kuin CSS tai JS, varsinkin kun se on sisältöä.

   Muita asioita

   Voit myös määrittää, onko kuva 2x vai 1x, srcsetin avulla. Joten todella yksinkertainen käyttötapa voi olla:

   Se yksin on melko hyödyllinen. Älä sekoita sitä määrittelemällä leveyksiä. Kuten Eric Portis sanoo:

   Ja vielä kerran haluan korostaa, että vaikka lähteisiin voidaan liittää 1x / 2x-tarkkuuden kuvaajia kuvien srcsetsijasta w, 1x / 2x & w eivät sekoita. Älä käytä molempia samalla tavalla srcset. Todella.

   Ja muistatko, kun sanoin, että alkuperäinen kuvan täyttö oli helppoa? Uusi voi olla niin helppoa, mutta sisällä olevat elementit tukevat myös srcsetja sizes. Tämä tarkoittaa, että voit saada täsmällisen. Se lisää tähän uuden kerroksen:

   1. Sinä päätät kumpi

      Linkit

      • Martin Wolfin artikkeli, joka inspiroi tätä
      • Picturefill on polyfill-tiedosto, jota haluat käyttää.
      • Tim Wrightin Smashing Magazine -artikkeli Picturefill 2.0: sta
      • Eric Portis siitä, miksi Srcset ja koot ovat olemassa ja mitä se ratkaisee paremmin kuin mediakyselyt
      • Eric Portis lisää uudesta

      Katso Chris Coyierin (@chriscoyier) Pen srcset & koko -testaus CodePenistä.