Responsive Images

With a responsive page layout you obviously want any images on the page to be responsive as well. Now obviously when we have an image it has an actual size that will of course be the largest size that we want it to display on the page (if we wanted to be able to display it bigger than that we'd make the actual image size bigger to start with so that it doesn't lose resolution at the larger sizes).

Some text to go next to the image of the baboon to demonstrate how this works. The space for this text will resize at larger widths while the image will reduce in size at smaller widths - all without a media query.

Where we can make an image responsive is to allow it to be displayed smaller than its original size when the page layout can no longer fit the full sized image.

To do this we start by placing the image in the page normally, making sure that we include the width and height of the actual image as a part of that definition. To make it responsive when the viewport becomes too small for the full sized image to fit properly we will make it responsive by adding a max-width into the CSS.

The responsive image will resize based on the size of the element that it contained within so there needs to be something in the CSS that resizes the container element. This can either be different widths specified in media queries or something as simple as giving the containing element a percentage width.

All we need to do to make the image responsive within that element is to specify a max-width that is a percentage of the available width in the element. The image will display full width (as defined in the HTML) when it takes up less than that percentage of the container width but will automatically resize itself smaller when the full sized image is bigger than the specified percentage of the container element. To maintain the correct aspect ratio of the image we simply specify height:auto.

As an example, suppose that we have the following HTML:

<div id="picture">
<img src="baboon.png" width="512" height="512">
<p>Some text to go next to the image.</p>

Let's give the picture container a 25% width and a grey background so that we can see where the container is and float:left the image so that the text appears next to the image. This means that we need to add overflow:hidden to the container so that the image which has been removed from the page flow doesn't fall out the bottom of its container. It we then set a max-width of 50% on the image we will have an image that stays inside of that container and displays full size provided that it isn't taking up more than half of the container width and if the full sized image would take up more than half of the container then the image is made smaller so that it only takes up half the width.

So our CSS now looks like this:

#picture {width:25%; background-color:#ccc; overflow:hidden;}
#picture img {float:left; max-width:50%; height:auto;}


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow