Responsively designed websites are become more of the norm than the exception these days and one of the biggest challenges for a beginner trying to develop these sites is dealing with the images. Luckily with a little css we can make sure they re-size proportionally as the screen re-sizes.

img { width: 100%; height: auto;}

So that code will make your image the full width of its containing element.

When building responsive sites I use percentages for all of my column widths on the page so as the page changes widths all of the columns also change width. With the code above the images will automatically resize so they always have the correct proportion to fit the column.

You can see this in action here. As you make the browser narrower you will see the image resize to fit the width of the column.

One issue with this method is that we are using the same image for a smartphone as we are on a full computer which can make the pages a bit heavy for the smartphone user. I am currently experimenting with a little bit of javascript that will dynamically change which image loads based on the screen width. It’s not done yet but when it is I will post the code on this site.

In the next post I will talk about media queries and how you can use them to adjust elements on the fly with just css.