O'Reilly logo

Responsive Web Design: Solutions For Responsive Images by Smashing Magazine

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

One Solution To Responsive Images

By Gavyn McKenzie

Responsive images have been, and are, one of the hardest problems in responsive web design right now. Until browser vendors have a native solution, we have to think on the fly and come up with our own solutions. “Retina” images are especially a challenge because if you have sized your layout with ems or percentages (as you should!), then you cannot be sure of the exact pixel dimensions of each image being displayed.

In this chapter, we’ll look at one solution to the problem that we implemented on our portfolio website at Etch1, where you can see an early working version in the wild.

Requirements

We used a content-first2 approach on Etch. We knew we wanted to use a lot of images to quickly convey ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required