IMG fit breedte parent zonder compressie

[Ronnyrr]

He Tweakers,

D.m.v. het laden van afbeeldingen op retina grootte heb ik afbeeldingen in mijn website die buiten de maximale breedte van de parent (1170px) div gaan.

Door met CSS de max-width op 100% te zetten word deze geschaald en ziet het er netjes uit.
Echter als ik dan wel een afbeelding van 1170px upload, voor niet-retina schermen, ziet deze afbeelding er niet netjes uit (terwijl deze de exacte breedte is).

Zie het verschil:


Iemand enig idee hoe ik zowel retina als niet-retina afbeeldingen netjes weergegeven krijg binnen de 1170px?
Thanks!

[reshi]

http://imulus.github.io/retinajs/ ?

[MoietyMe]

Of iets gebruiken dat ook daadwerkelijk in de spec staat

srcset

Polyfill:
https://github.com/borismus/srcset-polyfill

[Bosmonster]

Weet niet helemaal precies wat je nu probeert te zeggen, maar je kunt de retina-versie meestal een stuk hogere compressie meegeven dan de niet-retina.

Je gebruikt verschillende afbeeldingen, dus ook de compressie kun je natuurlijk zelf regelen.

Overigens kun je je ook afvragen of je nog aan niet-retina moet denken. Alleen IE8 heeft problemen met background-size (de meest gebruikte css-feature hiervoor). En er zijn ook genoeg, zelfs steeds meer, laptops/desktops met een hogere PPI. Het is geen mobile-only ding meer.

[ Voor 36% gewijzigd door Bosmonster op 22-08-2014 13:00 ]