# 133: Find ud af responsive billeder - CSS-tricks

Jeg er sandsynligvis lidt sjælden, fordi jeg hellere nød at prøve at holde trit med den responsive billeder. Det er et interessant problem, der opdrættede mange interessante løsninger. Det hele begynder dog at blive samlet nu, nu hvor de officielle løsninger er:

1. og venner
2. 

   Sig, at vi er på en 1x skærm. Fordi vi har fortalt browseren, at vi bruger disse billeder så store, som vi overhovedet kan (100% af visningen), vil "breakpoints" for når browseren vender billederne ud, ske ved 1280px, 640px, og 320 px, de samme nøjagtige størrelser, som vi har fortalt det, billederne er.

   Hvis vi er på en 2x skærm, vil disse "breakpoints" blive skåret i halvdelen (uanset hvad vi rent faktisk gør for at størrelse disse billeder) og vil være på 640px, 320px og 160px.

   Lad os sige, at vi bruger de samme billeder, men vi ved meget mere om vores sidelayout og brugte noget som dette:

   Her siger vi (med sizesattributten), hvis visningsporten er 500 px eller mindre, har vi til hensigt at vise billedet med en bredde på 250 px. Hvis visningen er bredere end det, skal du vise billedet med 500 px bredde.

   Det ville matche med CSS sådan:

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

   På en 1x skærm får du altid 320w (lille) billede, når visningen er 500px bred eller mindre, og du får altid 640w (medium) billedet, når visningen er større. Du får aldrig det store billede, fordi det kan fortælle, at du aldrig har brug for så mange pixels.

   Ona 2x skærm får du altid 640w (medium) billede, når visningen er 500px bred eller mindre (fordi den mener, at den har brug for 500px pixels, og den lille ikke er nok til 320px), og du får altid 1280w (stort) billede, når visningen er større. Du får aldrig det lille billede, fordi det aldrig er nok pixels til at dække det, du har fortalt det, at du agter at gengive billedet på.

   Faktisk størrelse

   Husk, at den faktiske størrelse på billedet stadig er op til dig. Jeg tror i de fleste tilfælde er det dig, der gør det gennem CSS. Og CSS vinder altid. Hvad du erklærer der vil være den gengivne bredde på billedet, uanset hvad der sker med srcsetog sizeslignende. Det fungerer bare, hvilket billede der vises.

   Det er det, der gør attributterne lidt hårde. Lad os sige, at du har noget som:

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

   Det er slet ikke usædvanligt. Så nu, hvilken størrelse bruger du i sizesattributten? Det ville være 13,33% (gang dem alle sammen), fordi dette antal skal være relativt til visningen, ikke containeren. Og det tager ikke højde for margener og polstring og ting på disse containere, så det er lidt gætte. Jeg gætter på, at der tælles tæt på hestesko, håndgranater og attributten størrelser.

   Lad os sige, at der kommer en medieforespørgsel, og kroppen bliver faktisk 75% bred oven på alt det. Det skal du vide, så du kan justere, hvad du tror, ​​den gengivne størrelse af billederne vil være. Din størrelsesattribut kan blive:

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

   Gå derefter igennem det igen for hvert layoutmedieforespørgsel, du har, der påvirker indholdsbilleder. Det kan blive lidt komplekst.

   Praktiske størrelser?

   Jeg formoder, at mest brug af den virkelige verden vil bruge noget som:

   Hvis vi antager, at indholdsbilleder vil være omkring halvdelen af ​​browservinduet på store skærme og den fulde størrelse af browservinduet på små skærme - lad bare breakpoints ske, hvor de sker. Du får stadig et ret anstændigt valg på denne måde uden at slave væk for at matche alle dine medieforespørgsler nøjagtigt.

   Og husk, at dette er indholdsbilleder. HTML har tendens til at vare længere end CSS eller JS gør, især når det er indhold.

   Andre ting at vide

   Du kan også angive, om et billede er 2x eller 1x med srcset. Så en virkelig enkel brugssag kan være:

   Det alene er ret nyttigt. Bland det ikke med angivende bredder. Som Eric Portis siger:

   Og igen, lad mig understrege, at mens du kan vedhæfte 1x / 2x opløsningsbeskrivere til kilder i srcsetstedet for wdeskriptorer, blandes ikke 1x / 2x & w. Brug ikke begge i det samme srcset. Virkelig.

   Og husk da jeg sagde, at den originale billedudfyldning var let? Det nye kan være så let, men elementerne indeni understøtter også srcsetog sizes. Det betyder, at du kan blive meget specifik. Det tilføjer endnu et lag til dette:

   1. Du bestemmer hvilken

      Links

      • Martin Wolfs artikel, der inspirerede dette
      • Billedudfyld er den polyfyldning, du vil bruge.
      • Smashing Magazine-artikel om Picturefill 2.0 af Tim Wright
      • Eric Portis om, hvorfor Srcset og størrelser findes, og hvad det løser bedre end medieforespørgsler
      • Eric Portis med mere om det nye

      Se Pen srcset & størrelsestestcase af Chris Coyier (@chriscoyier) på CodePen.