Skip Navigation

Menu

hero

Dear Ms. FEWD: Responsive Images

2/3/2017 | SARAH BRAUMILLER

Dear Ms. FEWD,

All the developers are using responsive images these days. I’ve read about <picture>, but I’ve been told that’s just for “art direction”. What should I use when it’s the same image, but it just needs to be different sizes?

Thanks,
Size Matters


Dear Size Matters,

It’s true, part of a developer’s job today is ensuring that their code renders properly across multiple devices in addition to multiple browsers.

There are several ways to go about this. To start, we need to ask what we’re doing with this image. Is it content or presentation? Is the image the same across all viewports, or does it change? If it changes, how does it change?

For a content image that will be the same size across all viewports, but needs to flex with the browser, putting the following on your image will cause it to flex within its container:
max-width: 100%;
height: auto;
width: 100%;

This example shows one image using the above properties, and one image using the above properties in a container that was set at 50%. Move the side of your browser in and out, and watch the image resize.