# 133: Responsieve afbeeldingen uitzoeken - CSS-trucs

Ik ben waarschijnlijk een beetje zeldzaam omdat ik het leuk vond om te proberen de responsieve afbeeldingen bij te houden. Het is een interessant probleem dat veel interessante oplossingen heeft opgeleverd. De hele zaak begint nu echter af te ronden, nu de officiële oplossingen zijn:

1. en vrienden
2. 

   Stel dat we op een 1x scherm staan. Omdat we de browser hebben verteld dat we deze afbeeldingen zo groot mogelijk gaan gebruiken (100% van de viewport), zullen de 'breekpunten' voor wanneer de browser uitklapt de afbeeldingen plaatsvinden op 1280px, 640px, en 320px, exact dezelfde formaten als we hebben verteld dat de afbeeldingen zijn.

   Als we ons op een 2x-scherm bevinden, worden die "breekpunten" gehalveerd (ongeacht wat we daadwerkelijk doen om die afbeeldingen te verkleinen) en zijn ze 640px, 320px en 160px.

   Laten we nu zeggen dat we dezelfde afbeeldingen gebruiken, maar we weten veel meer over onze pagina-indeling en hebben zoiets als dit gebruikt:

   Hier zeggen we (met het sizesattribuut) dat als de viewport 500px of kleiner is, we de afbeelding op 250px breed willen weergeven. Als de viewport breder is, geeft u de afbeelding weer met een breedte van 500 px.

   Dat zou als volgt overeenkomen met CSS:

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

   Op een 1x scherm krijg je altijd het 320w (kleine) beeld wanneer de viewport 500px breed of kleiner is, en je krijgt altijd het 640w (medium) beeld wanneer de viewport groter is. U krijgt nooit de grote afbeelding, omdat deze kan zien dat u nooit zoveel pixels nodig heeft.

   Op een 2x scherm krijg je altijd het 640w (medium) beeld wanneer de viewport 500px breed of kleiner is (omdat het denkt dat het 500px aan pixels nodig heeft en het kleine niet genoeg is met 320px), en je krijgt altijd het 1280w (groot) beeld wanneer de viewport groter is. Je krijgt nooit de kleine afbeelding, omdat het nooit genoeg pixels is om te bedekken wat je hebt verteld en waarmee je de afbeelding wilt renderen.

   Werkelijke maatvoering

   Onthoud dat de werkelijke grootte van de afbeelding nog steeds aan jou is. Ik zou denken dat je het in de meeste gevallen doet via de CSS. En de CSS wint altijd. Wat u daar aangeeft, is de weergegeven breedte van de afbeelding, ongeacht wat er met de srcseten sizeszo gebeurt . Dat werkt gewoon uit welke afbeelding wordt getoond.

   Dit is wat de kenmerken van de maten een beetje moeilijk maakt. Laten we zeggen dat je zoiets hebt als:

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

   Dat is helemaal niet ongebruikelijk. Dus welke maat gebruik je nu in het sizesattribuut? Dat zou 13,33% zijn (vermenigvuldig ze allemaal samen) omdat dat aantal relatief moet zijn ten opzichte van de viewport, niet de container. En dat houdt geen rekening met marges en opvulling en zo op die containers, dus het is een beetje gissen. Ik denk dat het aantal hoefijzers, handgranaten en het kenmerk maten dichtbij zijn.

   Laten we dan zeggen dat er een mediaquery langskomt en dat het lichaam bovendien 75% breed wordt. U moet dat weten, zodat u kunt aanpassen wat u denkt dat de weergegeven grootte van de afbeeldingen zal zijn. Uw kenmerk 'maten' kan worden:

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

   Neem dat vervolgens opnieuw door voor elke lay-outmediaquery die u hebt en die betrekking heeft op inhoudsafbeeldingen. Het kan een beetje ingewikkeld worden.

   Praktische maten?

   Ik vermoed dat het meeste gebruik in de echte wereld zoiets zal gebruiken als:

   Ervan uitgaande dat inhoudsafbeeldingen ongeveer de helft van het browservenster zijn op grote schermen en de volledige grootte van het browservenster op kleine schermen - laat de breekpunten gewoon gebeuren waar ze zich voordoen. Op deze manier krijg je nog steeds een behoorlijk behoorlijke keuze zonder te zwoegen om al je mediaquery's precies te matchen.

   En onthoud dat dit inhoudsafbeeldingen zijn. HTML heeft de neiging om langer mee te gaan dan CSS of JS, vooral als het inhoud is.

   Andere dingen om te weten

   U kunt ook aangeven of een afbeelding 2x of 1x is met srcset. Een heel eenvoudig gebruik kan dus zijn:

   Dat alleen al is best handig. Meng het niet met het specificeren van breedtes. Zoals Eric Portis zegt:

   En laat me nogmaals benadrukken dat hoewel je 1x / 2x resolutie descriptors aan bronnen kunt toevoegen in srcsetplaats van wdescriptors, 1x / 2x & w niet mixen. Gebruik niet beide in hetzelfde srcset. Werkelijk.

   En weet je nog dat ik zei dat het aanvullen van de originele afbeelding gemakkelijk was? Zo eenvoudig kan het nieuwe zijn, maar de elementen binnenin ondersteunen ook srcseten sizes. Dat betekent dat je heel specifiek kunt worden. Het voegt hier nog een laag aan toe:

   1. U beslist welke

      Links

      • Martin Wolf's artikel dat dit inspireerde
      • Picturefill is de polyfill die u wilt gebruiken.
      • Smashing Magazine-artikel over Picturefill 2.0 door Tim Wright
      • Eric Portis over waarom Srcset en formaten bestaan ​​en wat het beter oplost dan mediaquery's
      • Eric Portis met meer over het nieuwe

      Zie de Pen srcset & maten testcase door Chris Coyier (@chriscoyier) op CodePen.