A Road map for Developing Responsive Images with CSS

Responsive design has become a de facto standard in making a website work well across a range of devices and browsers. The rise of Smartphones has revolutionized the web, and tablets are creating all the raves with their amazing popularity.

Considering all the things, it’s just impossible to ignore the importance of creating a website that caters to the needs of mobile devices. Responsive design is no more an option, it’s a need that every website owner must fulfill.

What is Responsive Design?

Responsive design is a concept in web design that allows a designer to create a website that gracefully works on multiple devices irrespective of the screen size, resolution, platform, and orientation.

Over the past few years, the responsive web design industry has evolved incredibly in developing some of the common best practices in creating responsive websites. As of today, creating responsive images using CSS is the most preferred approach to use.

Images are the most complicated and challenging aspect of responsive design. However, once you get the hang of it, you’ll be able to provide a pleasurable user experience.

In this tutorial, I am going to discuss about how you can use CSS3 media queries to build responsive images. The methods mentioned below are easy to follow and will surely help you in building a perfect responsive images.
So, let’s get started!

1. Creating a Basic Responsive Image

Let’s begin with a very simple and basic example. For this we will pick up a regular

<img>

we want to make responsive. Also, we have (div) that acts as a container for the

<img>

element.

HTML

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

The above code is provided with a width property of 96% so that it has margins on either sides. The max-width has been set to 960px to make the layout scale proportionately when viewed on large screens.

You can make the image resized automatically by using max width 100% and height auto. Just like this:

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 0screen { 
  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; 
}

It’s worth mentioning that it is important to set a fixed width and height in the form of HTML markup because only then an

<img>

element can be made responsive. It’s a nice technique to opt for legacy websites that have fixed dimensions.

Responsive Images with Columns

Let’s say you have a bunch of images which you want to display in columns. What would you do? It’s pretty simple and can be achieved just by lowering the CSS width property and by giving

<img>

elements a “display” property value of inline-block.

Columns are highly sought after design elements. Using them, one can easily display images or content in a visually appealing manner. They allow you to create a layout that looks like magazines and newspapers.

Creating columns can be quite daunting. However, one can easily code them with the help of CSS. We will discuss a couple of layout schemes: Two-column and three-column image layout.

Two-column Image Layout

Creating two-column image layout requires you to simply changing the size of the columns by adjusting the width to 48% or just half of the container. By adjusting the number, you’ll be able to create more or less margins between the columns.

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

CSS

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

Three-column Image Layout

the approach of creating three-column responsive layout is same except that here you need to set the width property to 32%, means one third of the container’s width.

<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

.three-columns { 
  width: 32%; 
  display: inline-block; 
}

Defining Conditional Breakpoints for Responsive Images

While creating a responsive design, it’s a sensible approach to define conditional breakpoints to adjust the design right.

The breakpoints can be defined in layouts, so that the image and column float with each other. This makes the column looks more clean and organized.

The following code will allow you present one-column image on Smartphones, two on tablets, and four on other devices.

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

CSS

/* to be rendered on small devices (e.g. smartphones) */ 
img { 
  max-width: 100%; 
  display: inline-block; 
} 
/* on medium devices (e.g. tablets) */ 
@media (min-width: 420px) { 
  img { 
    max-width: 48%; 
  } 
} 
/* For devices with larger screens (e.g. desktops) */ 
@media (min-width: 760px) { 
  img { 
    max-width: 24%; 
  } 
}

To Wrap Up

That’s all folks! Hopefully you enjoyed reading the tutorial as much as I enjoyed writing it. Go through it thoroughly and start creating cool stuffs with CSS.