CSS – The most preferable way of creating brilliant responsive images

May 10, 2015 , ,

The evolution of smartphones and smart tablets has resulted into a visible increase in the count of website owners who are looking forward to optimize their online portals for the mobile technology. When it comes to building a mobile responsive website, special emphasis needs to be put on placing images on different web pages. Whether it’s about tweaking the size, color scheme or the overall layout of images, everything needs to be put in place. If you too are about to design your very own responsive website, then this post will serve as a handy guide allowing you to learn the technique of creating beautiful responsive images using CSS. So, let’s get started.

Starting off with creation of a basic Responsive image using CSS

You can use CSS for providing a percentage-length unit to the basic responsive image as explained below:

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

In the above line of code, the width property of the element has been set to 100% so as to make sure that the basic responsive image’s width is similar to that of the image container, irrespective of the size of device that is being used for viewing the image. Also, you can find that the height of image element has been set to ‘auto’ ensuring that the image could be scaled proportionally.

Apart from the above explained CSS, there is a below displayed HTML structure for the div which would act as the element’s container:

<div class="imagecontainer">
    <img src="image1.jpg" width="920" height="544" />
</div>

In the above code, container has been assigned a width property of 2% along left and right margins. Additionally, there is a maximum width of 960px, affirming that the image layout won’t end up widening a lot on screens with much larger dimensions.

Here’s a look at the final CSS code snippet that’s used for creating responsive images using the aforementioned parameters:

div.imagecontainer {
    width: 92%;
    max-width: 920px;
    margin: 0 auto; /* to center the container for image element */
}

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

Creating a full-width Responsive Image

Talking about a full-width responsive image, it is the one which is always 100% of the size of viewport. As an attempt to create a full-width responsive image, you simply need to remove the max-width property of image container and allot it a new width of 100%. The code snippet associated with creation of a full-width Responsive image is shown below:

.imagecontainer {
    width: 100%;
}
img {
    width: 100%;
}

Creating Responsive Images which need to be displayed in Columns Under a situation where you want the images to be displayed side-be-side in columns, you just need to follow the below mentioned approach.

In order to achieve a responsive image in column, simply reduce the value of CSS width property and render a display property of inline-block to <img> elements. Now, let me make you familiar with the two layout schemes for the responsive images:

1. Two-column Responsive Image Layout

You can set the CSS width property to around 46% i.e. roughly half of the image element container for a two-column responsive image layout. I haven’t set the two-column responsive image layout to 50% simply to provide margins on the two sides of the responsive image.

HTML structure for the same is shown below:

<div class="container">
<img src="image01.jpg" alt="" width="920" height="620" />
<img src="image02.jpg" alt="" width="920" height="620" />
</div>

CSS for the same is shown below:

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

2. Three-column Responsive Image Layout

In this case, all you need to do is simply set the width property to around one-third of the image element containers width i.e. to about 30%.

HTML structure for the same is shown below:

<div class="container">
<img src="image01.jpg" width="920" height="620" />
<img src="image02.jpg" width="920" height="620" />
<img src="image03.jpg" width="920" height="620" />
</div>

And, the CSS code snippet associated with the same is shown below:

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

That’s it for now!

Final Thoughts

Responsive images can serve as an added charm to the existing glory of a responsive website. If you’re including the right kind of images in your mobile-friendly website, you’ll be able to hold the attention of the visitors and thereby get them converted into high-paying leads. I’m quite sure the responsive image creation techniques covered above would have encouraged you to go ahead with creation of your unique set of responsive images that will look stunning on all kinds of mobile devices with different screen sizes.