An easy-to-follow guide on creating responsive images using CSS

An easy-to-follow guide on creating responsive images using CSS

Responsive images form an indispensable component of every responsive web design(RWD) strategy that's been followed for building mobile-friendly websites and applications. If you too are a web designer all set to follow this completely different approach to website/app designing, then you'd definitely be required to create images that can be included within the design for rendering it a flawless visual appeal. In order to resolve all your confusions regarding the creation of responsive images, I've written this post which walks you through a simple technique of creating responsive images that can easily improve the overall user experience pertaining to the created website or application.

Getting Started

This tutorial offers you a detailed explanation on the method used for creating responsive image while purely relying on CSS height and width properties. That means, you'll be able to utilize this technique on all types of devices and browsers. The only requirement for this technique is that the web design's layout must be responsive/fluid.

Foundational concept behind the method covered in this tutorial

Well, the concept behind the technique of creating responsive images explained in this post is that you can use CSS for rendering images a percentage-length unit for their width property, followed by rendering the value as 'auto' to their height property. The code snippet associated with the same is shown below:

img {

width: 100%;

height: auto;

}

Here, the <img> element has a width property of 100% ensuring that the width always remains equal to the container irrespective of the viewport's size. By setting the height to auto, it is being ensured that the resultant image would scale proportionally.

Creating a Basic Responsive Image

Here, we'll use a div which will act as the container of <img> element.

The HTML structure for this will be as shown below:

</div>

As is visible from the HTML structure above, the container has a width property of 95% so that the resultant image has right and left margins. Keeping the max-width as 950px ensures that the layout isn't too wide to fit the large screens.

Now, here's a look at the CSS associated with creating the basic responsive image

div.container {

width: 95%;

max-width: 950px;

margin: 0 auto; /* to center the container */

}

img {

width: 100%;

height: auto;

}

Here, the <img> element would continue to stay responsive even if it is being provided a fixed height and width HTML attributes( here, it is height=620 and width=950) in its markup.

Creating a Full-width Responsive Image

In order to come up with a responsive image that are 100% of the viewport's size, all you need to do is simply remove the container's max-width property i.e. 950px and render it a new width of 100%. The code associated with the same is shown below:

.container {

width: 100%;

}

img {

width: 100%;

}

Creating Responsive Images to be placed in columns

There are situations where you'll be required to display the images side-by-side in columns. Here, all you need to do is simply lower the CSS width property, followed by rendering the <img> elements a display property as 'inline-block'. I'll be discussing about two specific layout schemes viz: a two-column image layout and a three-column image layout.

Two-column Responsive Image Layout

In case of a two-column responsive image layout, you can simply set the CSS width property to around 46% i.e. approximately half of the image container. Not setting the value to 50% ensures that the image would have margins on its sides.

HTML code associated with the same is shown below:

</div>

CSS for the same is shown below:

img {

width: 46%;

display: inline-block;

}

Three Column Responsive Image Layout

The technique for a three-column responsive image layout would remain the same with only one change that you need to set the width property to about one-third of the image container's width. Here, I've set it to 31%.

HTML for the same is shown below:

</div>

CSS for the same is shown below:

.three-columns {

width: 31%;

display: inline-block;

}

We're done!

Conclusion

Now that you've gathered an in-depth understanding of the technique for creating fabulous responsive images, I'm sure you'll be all motivated to equip your responsive websites/apps with images that are served well on all kinds of mobile screens.

Author Bio:

Samuel Dawson has relevant experience in the field of web development. He is working as web developer in Designs2HTML Ltd, a secure company in the process of PSD to HTML5 conversion. Samuel is also a serial blogger and shares his in-depth knowledge with others on the web.

An easy-to-follow guide on creating responsive images using CSS