Inducing Responsiveness To Your Images Via CSS

In this modern age world, there are a lot of techniques for building responsive images. However, the techniques are not same due to variations in browser support and complexities. One can make use of the srcset attribute, but it is a complex way of implementing responsive images as it demands several images, markups and the new HTML attributes (not well supported outside modern browsers).

There are lot of people that go for HTML to WordPress conversion so as to make intuitive websites for their business on all kinds of devices irrespective of the size and its orientation. However, in this article, we will simply work on height and width of CSS, which will further make it independent from the browsers property and thus will work on all browser and CSS. However, it will require a fluid design layout for your website. The concept behind this is to use CSS to make images a percentage length unit or any relative unit for making their width re-sizeable and give auto value to the height property.

img {

width: 100%;

height: auto;

}

What's a Responsive image ?

In order to know about a responsive image, we can take an example.

Div acts as a container of an <img> element.

HTML

<div class="container">

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

</div>

The container has margins on the left and right as the container has 96% width property. The max width is of 960px so that the layout do not appears too wide on a bigger screen.

The container contains a <img> element of 100% width, so that its width so as to make the width equal to its container irrespective of the viewport's size, thus this makes this responsive. Further, set the height to auto so that the image scales in proportion to the screen.

CSS

div.container {

width: 96%;

max-width: 960px;

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

}

img {

width: 100%;

height: auto;

}

The <img> element is always responsive even if we assign a fixed height and width to HTML attribute as shown in the markup (i.e. width="640", height="960"). This technique is best suited for content which has a fixed set of dimension via HTML.

Putting Responsive images in columns

In order to display more images on a small screen, we try to scooch in images in a columns. We often get to see websites which display galleries in a thumbnail on a grid style.

In order to make images responsive in columns, we only need to lessen the width property of the CSS and assign a display property value to the <img > elements.

We further have a couple of layout schemes namely: A two-columns layout and three-column image layout for images.

Two- column layout for responsive images

To get a two-column responsive layout, you need to set the width property of the CSS to 48% or nearly half of the container. Though, you might be thinking why not to 50%. The reason being that images have margins so we need to keep room for them as well.

HTML

<div class="container">

<img src="image01.jpg" width="860" height="540" />

<img src="image02.jpg" width="860" height="540" />

</div>

CSS

img {

width: 48%;

display: inline-block;

}

Three-column layout for responsive images

You need to use the very same concept in order to get a three-column layout for responsive images, all you need to do is to set the width of the container to 32%.

HTML

<div class="container">

<img src="img01.jpg" width="860" height="540" />

<img src="img02.jpg" width="860" height="540" />

<img src="img03.jpg" width="860" height="540" />

</div>

CSS

.three-columns {

width: 32%;

display: inline-block;

}

Adding Conditional breakpoints

Adding conditional breakpoints for responsive images is a good practice, and thus when the images grow smaller, the columns can merge themselves.

This can be done via media queries.

In code snippet used below, we will make images display in single column in smaller device such as smartphone, two columns on slightly bigger devices on phablets or tablets and four columns on much bigger screen such as a laptop or desktop.

HTML

<div class="container">

<img src="img01.jpg" width="860" height="540" />

<img src="img02.jpg" width="860" height="540" />

<img src="img03.jpg" width="860" height="540" />

<img src="img04.jpg" width="860" height="540" />

</div>

CSS

/* For Devices of small size (e.g. smartphones) */

img {

max-width: 100%;

display: inline-block;

}

/* For Devices of medium size (e.g. tablets) */

@media (min-width: 420px) {

img {

max-width: 48%;

}

}

/* For Devices of large size (e.g. desktops) */

@media (min-width: 760px) {

img {

max-width: 24%;

}

}

Responsive images with full width

In order to get responsive images that always remain 100% of the device size, you need to just change the container's width to 100% and simply remove it's max-width property which is 960 px by default.

.container {

width: 100%;

}

img {

width: 100%;

}

These methods were no doubt simple and easy methods to cater mobile device users, but it's pitfall is that it will always deliver images of full size irrespective of the device used by the user. The smaller devices won't be able to take the advantage of high-resolution images which are served in full dimensions, and most of the devices won't be able to open the images even.

Further, if you would wish to improve the performance of your web app by serving your images after reading the conditions ( i.e. a low resolution and a smaller images displayed on small mobile devices and likewise with other devices.), you need to program with the srcset, pictures and sizes elements.