Development

A definitive guide on creating responsive images using CSS

Ever since the smartphone technology came into existence, web designers and developers have been busy creating websites and applications that can load and run flawlessly on a variety of mobile devices. Especially, when it comes to placing images on web pages; extra attention is being paid to tweaking the size and format of the images so that they can easily fit into a wide array of devices with varying screen sizes.

Today, through this post, I’ll be making you familiar with the technique of achieving responsive images with CSS. Here, I’ll be relying on the CSS width and height properties.

Creating a Basic Responsive Image with the help of CSS

css-image-01

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

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

Here, the width property of element is set to 100% to ensure that the image’s width is equal to its container, regardless of the size of the device, the image is being viewed on. Plus, the height of the image element is set to auto, thereby ensuring proportional scaling of the image.

In addition to above, there is a div which acts as the container of the element and the HTML structure for the same is shown below:

  

The container has a width property of 94% with right and left margins. Also, it has a maximum width of 940px, thereby ensuring that the layout doesn’t get on to become too wide on screen with larger dimensions.

Now, the CSS code snippet associated with building the responsive image in accordance to the aformentioned details is shown below:

div.imgcontainer {
      width: 94%;
      max-width: 940px;
      margin: 0 auto; /* to center the container for image element */
}
img {
      width: 100%;
      height: auto;
}

Creating responsive images that need to be displayed in columns

If you’re looking ahead to display images in a column(within a grid) then you just need to reduce the value for the CSS width property and assign a display property value(inline-block) to the element. Here, let us discuss two scenarios:

Scenario 1
Two-column Responsive Image Layout

Considering the example of basic responsive image covered above, you can simply set the CSS width property to 47% i.e. roughly half of the imagecontainer. Here, a crucial point to be noted is that I haven’t set the value to 50% simply to allow space for margins on the sides.

Now, the modified HTML and CSS would be like this:

HTML Code

             

CSS Code

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

Scenario 2
Three-column Responsive Image Layout

Quite similar to the scenario discussed above, in case of a three-column responsive image layout, you just need to set the width property to about one-third of the container’s width i.e. around 31% as shown below:

HTML Code

                    

CSS Code

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

Full-width Responsive Image

responsive-article
Image courtesy of Pierre Borodin

Well, a full-width responsive image is one which is always 100% of the viewport size. To achieve such an image, all you need to do is remove the max-width property of image container(in this tutorial, it is 940px) and assign it a new width of 100%.

Code associated with the same is shown below:

.imgcontainer {
      width: 100%;
}

img {
      width: 100%;
}
Using Media queries for including conditional breakpoints within responsive images displayed in columns

Below is the HTML And CSS code that will allow images to be displayed as per the following formats:

  • 1. In one column, when viewed on a smartphone
  • 2. In two columns, when viewed on tablets
  • 3. In four columns, when viewed on larger screens.

HTML Code

                           

CSS Code

/* When viewed on small devices (e.g. smartphones) */
img {
      max-width: 100%;
      display: inline-block;
}
/* When viewed on medium devices (e.g. tablets) */
@media (min-width: 320px) {
   img {
      max-width: 46%;
   }
}
/* When viewed on large devices (e.g. desktops) */
@media (min-width: 650px) {
   img {
      max-width: 22%;
   }
}

That’s it!

Wrapping Up

Hope you’d have gathered all the information covered within this post and would be all geared up for creating absolutely stunning images that look great on all types of hand-held devices.

Subscribe to our mailing list