# 133: Finn ut responsive bilder - CSS-triks

Jeg er sannsynligvis litt sjelden fordi jeg likte å prøve å holde tritt med responsive bilder. Det er et interessant problem som avlet mange interessante løsninger. Hele tingen begynner å slå seg sammen nå, nå som de offisielle løsningene er:

1. og venner
2. 

   Si at vi er på en 1x skjerm. Fordi vi har fortalt nettleseren at vi skal bruke disse bildene så store vi muligens (100% av visningsporten), vil "breakpoints" for når nettleseren vender ut bildene skje ved 1280px, 640px, og 320 px, samme nøyaktige størrelser som vi har fortalt at bildene er.

   Hvis vi er på en 2x skjerm, vil disse "breakpoints" kuttes i to (uavhengig av hva vi faktisk gjør for å størrelse disse bildene) og vil være på 640px, 320px og 160px.

   La oss si at vi bruker de samme bildene, men vi vet mye mer om sideoppsettet vårt, og brukte noe som dette:

   Her sier vi (med sizesattributtet), hvis visningsområdet er 500 px eller mindre, har vi tenkt å vise bildet med en bredde på 250 px. Hvis visningsområdet er bredere enn det, kan du vise bildet med 500 px bredde.

   Det samsvarer med CSS slik:

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

   På en 1x skjerm får du alltid 320w (lite) bilde når visningsporten er 500px bred eller mindre, og du får alltid 640w (medium) bildet når visningsporten er større. Du får aldri det store bildet, fordi det kan fortelle at du aldri trenger så mange piksler.

   Ona 2x skjerm, du vil alltid få 640w (middels) bilde når visningsporten er 500px bred eller mindre (fordi den tror den trenger 500px piksler og den lille ikke er nok med 320px), og du får alltid 1280w (stort) bilde når visningsområdet er større. Du får aldri det lille bildet, for det er aldri nok piksler til å dekke det du har fortalt at du har tenkt å gjengi bildet på.

   Faktisk størrelse

   Husk at den faktiske størrelsen på bildet fortsatt er opp til deg. Jeg tror i de fleste tilfeller er det du som gjør det gjennom CSS. Og CSS vinner alltid. Det du erklærer der vil være den gjengitte bredden på bildet, uansett hva som skjer med srcsetog så sizes. Det løser bare hvilket bilde som skal vises.

   Dette er det som gjør størrelsesattributtet litt tøff. La oss si at du har noe sånt som:

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

   Det er ikke uvanlig i det hele tatt. Så hvilken størrelse bruker du i sizesattributtet? Det ville være 13,33% (multipliser dem alle sammen) fordi tallet må være relativt til visningsområdet, ikke containeren. Og det tar ikke hensyn til marginer og polstring og ting på disse containerne, så det er litt av en gjetning. Jeg antar nærtall i hestesko, håndgranater og størrelsesattributtet.

   La oss si at et mediespørsmål kommer og kroppen faktisk blir 75% bred på toppen av alt det. Du må vite det slik at du kan justere hva du tror den gjengitte størrelsen på bildene blir. Størrelsesattributtet ditt kan bli:

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

   Gå deretter gjennom det igjen for hvert layoutmediespørsmål du har som påvirker innholdsbilder. Det kan bli litt komplekst.

   Praktiske størrelser?

   Jeg mistenker at mest bruk i den virkelige verden vil bruke noe sånt som:

   Forutsatt at innholdsbilder vil være omtrent halvparten av nettleservinduet på store skjermer og hele størrelsen på nettleservinduet på små skjermer - bare la brytpunktene skje der de skjer. Du vil fremdeles få et ganske anstendig valg på denne måten uten å slave unna for å matche alle mediespørsmålene dine nøyaktig.

   Og husk at dette er innholdsbilder. HTML har en tendens til å vare lenger enn CSS eller JS, spesielt når det er innhold.

   Andre ting å vite

   Du kan også spesifisere om et bilde er 2x eller 1x med srcset. Så en veldig enkel brukssak kan være:

   Det alene er ganske nyttig. Ikke bland det med spesifikke bredder. Som Eric Portis sier:

   Og igjen, la meg understreke at mens du kan feste 1x / 2x oppløsningsbeskrivere til kilder i srcsetstedet for wbeskrivelser, må 1x / 2x & w ikke blandes. Ikke bruk begge i det samme srcset. Egentlig.

   Og husker du da jeg sa at den originale bildefyllingen var enkel? Det nye kan være så enkelt, men elementene inni støtter srcsetog sizes. Det betyr at du kan bli veldig spesifikk. Det legger til et nytt lag til dette:

   1. Du bestemmer hvilken

      Lenker

      • Martin Wolfs artikkel som inspirerte dette
      • Bildefyll er polyfyllingen du vil bruke.
      • Smashing Magazine-artikkel på Picturefill 2.0 av Tim Wright
      • Eric Portis om hvorfor Srcset og størrelser eksisterer og hva det løser bedre enn mediespørsmål
      • Eric Portis med mer om det nye

      Se Pen srcset & sizes testcase av Chris Coyier (@chriscoyier) på CodePen.