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 ...