Images are an integral part of responsive web design, a concept introduced by Ethan Marcotte,

that allows web designers to make a website fits well across a range of mobile devices and

platforms. Traditional approach for creating separate URLs for different devices couldn’t cope up

with the specifications of variety of devices employed by users to access websites.

Responsive web design is the handy approach that provides webmasters create a website that is

compatible across a range of devices. Contrary to the traditional approach where separate URLs

were needed to create, RWD only utilizes a single URL which recognizes and responds to the

context on its own. It’s a practice that considers all aspect of the user experience, and quite often

makes use of images.

Images are exciting as well as challenging aspect of a responsive design. Images make a design

stand out and make a website look truly engaging. And, when talking about responsive images,

how you’d be a crime not to highlight the virtues of CSS.

CSS has come a long way when it comes to creating inspiring responsive images. It is one of the

simplest approaches available to build images that look graceful when viewed on a variety of

devices. In this tutorial, I will explain you the entire process of creating responsive images with the

help of CSS. Hopefully, you’ll find the tutorial helpful and bookmark it for the future reference. So,

without rambling on too much further, lets begin:

Creating a Basic Responsive Image

To make the guide comprehensive for you, I am using a very simple and basic <img> that we

are going to make responsive in the later part of the tutorial. The <div> can be considered as a

container for the <img> element. With the help of a simple <img> tag, we can determine the width

as a percentage of the containing element and the browser will automatically calculate the width

and scale it accordingly.

The HTML

<div class="container">
<img src="image01.jpg" width="960" height="640" />
</div>

In the above code, we start by giving percentage based width for a div. For example- we have

assigned the width-property up to 96% and add max width- 960, so that the layout reacts to the

size of the large screens proportionately.

You can now go on to make your image resize automatically by setting the width up to 100% and

height auto. 100% will make the image compatible for the container, so every time a page has

been resized, the container also gets resized, so as the image. This is how the code looks:

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

The above responsive image is compatible with IE7 and IE9, but not with IE8. To make it work on

IE8 as well simply apply conditional CSS for IE8 or you can use IE trick, like this:

@media screen {
img {
width: auto; /* for ie 8 */
}
}

CSS

div.container {
width: 96%;
max-width: 960px;
margin: 0 auto; /* to center the container */
}
img {
width: 100%;
height: auto;
}

Note: This approach requires you to set the width property and height using the HTML markup,

because then only you’ll be able to create a responsive image.

Creating Responsive Images with Columns

There are times when you feel the need to display images on the columns. It’s a nice practice to

revamp the overall look and feel of your website. The practice is extremely simple. All you need

is just reduce the CSS width property and assign a display property value (inline-block) to the

element.

There are a variety of layout schemes that designers are implementing, these days. Here, we

will discuss about two most common image layout schemes- Two-column and three-column

responsive images.

Two-column Responsive Images

Continuing with the above example, we can adjust the CSS width-property to 48% ( half of the

container). It’s worth noticing that I haven’t set the value up to 50% so that margins can be

provided on both of the sides.

Now, we can proceed to modify HTML and CSS like this:

<div class="container">
<img src="picture1.jpg" width="960" height="640" />
<img src="picture2.jpg" width="960" height="640" />
</div>

CSS

img {
width: 47%;
display: inline-block;
}

Creating Three-column Responsive Image Column

In the case of three-column responsive image layout, the CSS width-property can be set up to 32%

or we can say one third of the container’s width.

HTML

<div class="container">
<img src="picture1.jpg" width="960" height="500" />
<img src="picture2.jpg" width="960" height="500" />
<img src="picture3.jpg" width="960" height="500" />
</div>

CSS

img {
width: 32%;
display: inline-block;
}

To Wrap Up And that’s all! As of now you have gained a pretty good understanding of the process of creating

responsive images using CSS. Now, get ready to create inspiring mobile-friendly images and let

your design create a stir.