Responsive images












Innovation Talk


Veel gebruikte schaaltechniek


img {    max-width: 100%;}

Demo

Image grootte wordt aangepast aan de grootte van de parent

Met een paar kleine aanpassingen kunnen Retina-images ook geschaald worden, maar...


Performance


  • Media-queries die bepalen welke foto's getoond moeten worden?
  • Browser-preloading vóór de CSS en JavaScript
  • Op basis van bandbreedte (W3C Network Information API)



deck

By Dimitri Snijder

deck

  • 37