Match Pace With Mobility, Use CSS To Create Responsive Images

With the advent of smartphone technology every we programmer and business owner is after mobile app development. With a plenitude of handheld devices around it becomes extremely crucial for the developers to render a flawless user experience irrespective of the device. This is because you cannot actually count what all devices a single user is using or what is the market fragmentation in micro level.

One of the major concern while working on responsive website is placement of images. With images you need to be cautious with details such as the format and size. These details ensures whether your images will be displayed on the wide berth of devices present on the platform that varies a lot in size and orientation.

In this blog we will discuss how to create responsive images using CSS. Here we will see how to make fluid images by making the width and height of the CSS flexible. Let's unravel!

With CSS, you can render a percentage-length unit (in terms of height and width property) to the images as shown below:

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

Carrying forward the above discussion, there is a DIV which works as a container of the element and the HTML structure which is shown below.

<div>
    <img src="img/1/B88C5BD9" />
</div>

The width property of the container is 94% including the left and right margins.

The maximum width of this is 940px, this makes sure that the layout does not gets to wide on the screen of devices that are of bigger dimensions.

Following is the CSS code that can be taken as reference to build responsive images in accordance to details mentioned above.

div.imgcontainer {
    width: 94%;
    max-width: 860px;
    margin: 0 auto;
}

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

Making images compatible for column display

For those who wish to look for the images displayed in a column which is within a grid , need to drop down the value of the width property of the CSS and assign a value to its display property of the element. There can be two cases:

Case 1

Responsive Image Layout: Two-column

Looking at the example of responsive image afore mentioned, we can simply set the width property of the CSS to 47% which is approximately half of the image container.

The modified HTML and CSS will appear to be like the following:

HTML Code

<div>
    <img src="img/1/B88C5BD9" />
    <img src="img/1/B88C575C" />
</div>

CSS Code

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

Case 2

Responsive Layout: Three-column

This is similar to what we have discussed above, for three-column responsive layout, all you need to do is to set the width property to one-third of that of the width of the container.

HTML Code

<div>
    <img src="img/1/B88C5BD9" />
    <img src="img/1/B88C575C" />
    <img src="img/1/B88C535B" />
</div>

CSS Code

.img {
    max-width: 31%;
    display: inline-block;
}

Make your responsive image to Full-width

What is a full width responsive image? An image is said to be full width responsive if it always 100% of the display screen. In order to achieve this for your images you have to remove the max-width property of your image's container and assign the new width to 100%.

Following code snippet helps you to the same

.imgcontainer {
    width: 100%;
}

img {
    width: 100%;
}

Making use of Media queries for adding breakpoints dependent on conditions within a responsive images

Now we will discuss the HTML and CSS code according to rending display of different devices:

• In a column, rending the view on a smartphone
• In two columns, rending the view on a tablet
• In four columns, rending the view on a screens.

HTML Code

<div>
    <img src="img/1/B88C5BD9" />
    <img src="img/1/B88C575C" />
    <img src="img/1/B88C535B" />
    <img src="img/1/B88C70D6" />
</div>

CSS Code

/* mobile devices */
img {
    max-width: 100%;
    display: inline-block;
}

/* tablets devices */
@media (min-width: 320px) {
    img {
        max-width: 48%;
    }
}

/* desktops devices */
@media (min-width: 650px) {
    img {
        max-width: 24%;
    }
}