# 133: Räkna ut responsiva bilder - CSS-tricks

Jag är nog lite sällsynt genom att jag tyckte om att försöka hålla koll på den responsiva bilden. Det är ett intressant problem som föder upp många intressanta lösningar. Hela saken börjar dock ta slut nu, nu när de officiella lösningarna är:

1. och vänner
2. 

   Säg att vi är på en 1x skärm. Eftersom vi har sagt till webbläsaren att vi kommer att använda dessa bilder så stora som möjligt (100% av visningsområdet), kommer "brytpunkterna" för när webbläsaren kommer att vända ut bilderna hända vid 1280px, 640px, och 320 pixlar, samma exakta storlekar som vi har sagt att bilderna är.

   Om vi ​​är på en 2x skärm kommer dessa "brytpunkter" att halveras (oavsett vad vi faktiskt gör för att storleksanpassa dessa bilder) och kommer att vara 640px, 320px och 160px.

   Låt oss säga att vi använder samma bilder, men vi vet mycket mer om vår sidlayout och använde något så här:

   Här säger vi (med sizesattributet), om visningsområdet är 500 pixlar eller mindre, har vi för avsikt att visa bilden med en bredd på 250 pixlar. Om visningsområdet är bredare än så, visa bilden med 500 pixlar bred.

   Det skulle matcha CSS så här:

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

   På en 1x skärm får du alltid 320w (liten) bild när visningsområdet är 500px brett eller mindre, och du får alltid 640w (medium) bild när visningsområdet är större. Du får aldrig den stora bilden, för den kan säga att du aldrig behöver så många pixlar.

   Ona 2x skärm, du får alltid 640w (medium) bild när visningsområdet är 500px bredt eller mindre (eftersom det tror att det behöver 500px pixlar och det lilla räcker inte med 320px), och du får alltid 1280w (stor) bild när visningsområdet är större. Du får aldrig den lilla bilden, för det är aldrig tillräckligt med pixlar för att täcka vad du har sagt att du tänker göra bilden på.

   Faktisk storlek

   Kom ihåg att den faktiska storleken på bilden fortfarande är upp till dig. Jag skulle tro att i de flesta fall är det du som gör det genom CSS. Och CSS vinner alltid. Vad du förklarar där blir bildens återgivna bredd oavsett vad som händer med srcsetoch så sizes. Det räcker bara vilken bild som kommer att visas.

   Det är det som gör attributen lite tuffa. Låt oss säga att du har något som:

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

   Det är inte ovanligt alls. Så nu vilken storlek använder du i sizesattributet? Det skulle vara 13,33% (multiplicera dem alla tillsammans) eftersom det antalet måste vara relativt visningsområdet, inte containern. Och det tar inte hänsyn till marginaler och stoppning och sådant på dessa containrar, så det är en gissning. Jag antar att nära räkningar i hästskor, handgranater och attributet storlekar.

   Låt oss säga att en mediefråga kommer och kroppen faktiskt blir 75% bred utöver allt detta. Du måste veta det så att du kan justera vad du tror att den återgivna storleken på bilderna kommer att bli. Ditt storlekarattribut kan bli:

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

   Gå igenom det igen för varje layoutmediefråga du har som påverkar innehållsbilder. Det kan bli lite komplicerat.

   Praktiska storlekar?

   Jag misstänker att den mest verkliga användningen kommer att använda något som:

   Om vi ​​antar att innehållsbilderna kommer att vara ungefär hälften så stora som webbläsarfönstret på stora skärmar och hela storleken på webbläsarfönstret på små skärmar - låt bara brytpunkterna inträffa där de händer. Du får fortfarande ett ganska anständigt val på det här sättet utan att försvinna över att matcha alla dina mediefrågor exakt.

   Och kom ihåg att det här är innehållsbilder. HTML tenderar att vara längre än CSS eller JS, särskilt när det är innehåll.

   Andra saker att veta

   Du kan också ange om en bild är 2x eller 1x med srcset. Så ett riktigt enkelt användningsfall kan vara:

   Det ensamma är ganska användbart. Blanda inte det med specificerade bredder. Som Eric Portis säger:

   Och återigen låt mig betona att medan du kan bifoga 1x / 2x upplösningsbeskrivare till källor i srcsetstället för wdeskriptorer, blandar inte 1x / 2x & w sig. Använd inte båda i samma srcset. Verkligen.

   Och kommer du ihåg när jag sa att den ursprungliga bilden var enkel? Det nya kan vara så enkelt, men elementen inuti stöder också srcsetoch sizes. Det betyder att du kan bli väldigt specifik. Det lägger till ytterligare ett lager till detta:

   1. Du bestämmer vilken

      Länkar

      • Martin Wolfs artikel som inspirerade detta
      • Bildfyllning är polyfyllningen du vill använda.
      • Smashing Magazine-artikel om Picturefill 2.0 av Tim Wright
      • Eric Portis om varför Srcset och storlekar finns och vad det löser bättre än mediefrågor
      • Eric Portis med mer om det nya

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