O'Reilly logo

Mastering PostCSS for Web Design by Alex Libby

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

Making images responsive

A key element of making any site responsive has of course to be images—after all, we can always construct a site without images, but how effective would it really be?

Sure, one can always use a data Uniform Resource Identifier (URI) to convert images to CSS equivalents, but this is at the risk of dramatically inflating our style sheet to the point of it becoming impossible to manage. The reality is that we have to have some form of images—if we are to make them behave, we clearly need to ensure that they expand or contract in size, according to available screen estate.

The easiest way to adapt images for responsive layouts is to set a max-width value to 100%, along with height: auto and display: block, and remove any attribute ...

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