In order to cope up with the increasing demand for mobile optimized websites, almost every website owner is seeking for ways to switch to a responsive design. When we create a responsive design, all of our content fluidly adjusts to different device screens and resolutions, except for bitmap images. And so, it becomes very important to create responsive images – that can adjust to any screen (from mobile device screen to desktop computer screen).
Luckily, you can find several techniques to implement responsive image solution in your design. However, these techniques vary in terms of complexity and level of browser support. For instance, using the “scrset” attribute is a complex way to implement responsive images, as it requires using elements (like multiple images, more markup, etc.) that are not supported outside of modern browsers.
Through this post, I would like to talk about how you can implement responsive images in your website designs correctly, simply by using the CSS “width” and “height” properties. However, in order to use this method, you’ll need a responsive design layout. Lastly, all the solutions that we will cover in this tutorial will rely on the same concept: using CSS size the images to percentage-length or any relative-length unit for their width property. And make sure that the value of height property is set to auto.
Creating a Basic Responsive Image
To understand how you can create a basic responsive image, let’s have a look a simple example where we’ll use a <div> as the image container containing an image element:
HTML
<div class=”container”>
<img src=”first_image.jpg” width=”980″ height=”660″ />
</div>
The image container is assigned a width property of 98%, and has a max-width set to 980px ensuring that the layout doesn’t exceed the device screen size.
Furthermore, the width property of the <img> element within the container is set to 100%, so that the image width remains equal to its container irrespective of the device screen size it is being viewed on. This helps in making the image responsive. Lastly, the height property of the <img> element is set to auto, in order to scale the image proportionally.
CSS
div.container {
width: 98%;
max-width: 980px;
margin: 0 auto; /* to center the container */
}
img {
width: 100%;
height: auto;
}
Making the Images Responsive For Columns
Images in a web design are often displayed in a column (or within a grid). In order to display responsive images within columns, all you need to do is to lower the value of CSS width property and set the display property value of your image element to “inline-block”. Here we will discuss about two layout scheme for implementing responsive images:
1. Two-column Responsive Image Layout
In order to display responsive images in two-column layout, make sure that the CSS width property is one-half of the image container width (i.e. 49%). Make certain that the CSS width value does not exceed to 50%, so that your image have space (in the form of left and right margins).
HTML
<div class=”container”>
<img src=”first_image.jpg” width=”980″ height=”660″ />
<img src=”second_image.jpg” width=”980″ height=”660″ />
</div>
CSS
img {
width: 49%;
display: inline-block;
}
2. Three-column Responsive Image Layout
This layout scheme is based on the same approach as the two-column layout scheme, however, here the CSS width property would be one-third of image container’s width (i.e. 33%).
HTML
<div class=”container”>
<img src=”first_image.jpg” width=”980″ height=”660″ />
<img src=”second_image.jpg” width=”980″ height=”660″ />
<img src=”third_image.jpg” width=”980″ height=”660″ />
</div>
CSS
.three-columns {
width: 33%;
display: inline-block;
}
Note:
When creating a blogging site or any other content-focused website, you should choose the one-column layout scheme. But, when you need to show your website images in multiple columns, for example, in the form of image thumbnails the multiple-column layout scheme best fit your needs.
Creating Responsive Images For Different Screen Sizes
Often when designing a responsive image, we need to scale images to fit small screen and then expand it to adjust to the large screen. Now, it does not make sense to size the images separately according to the device screen size. A viable alternative to this problem is to insert breakpoints for the responsive images, which requires using the concept of media queries.
Let’s see an example to understand how you can use media queries to display responsive according to the following formats:
• images in one-column layout for Smartphones,
• images in two-columns for tablets,
• images in three-column for desktops.
HTML
<div class=”container”>
<img src=”first_image.jpg” width=”980″ height=”660″ />
<img src=”second_image.jpg” width=”980″ height=”660″ />
<img src=”third_image.jpg” width=”980″ height=”660″ />
<img src=”fourth_image.jpg” width=”980″ height=”660″ />
</div>
CSS
/* Responsive Images Viewed on small devices (e.g. Smartphones) */
img {
max-width: 100%;
display: inline-block;
}
/* Responsive Images Viewed on medium devices (e.g. tablets) */
@media (min-width: 420px) {
img {
max-width: 49%;
}
}
/* Responsive Images Viewed on large devices (e.g. desktops) */
@media (min-width: 760px) {
img {
max-width: 24%;
}
}
Creating Full-width Responsive Image
If you want to create a responsive image with the width property of 100% equal to the viewport’s size, you just need to make sure that that the container’s max-width property is set to 100% instead of 980px (as shown in the code below):
.container {
width: 100%;
}
img {
width: 100%;
}
Wrapping Up!
You may have created a fluid/responsive image, but it might not scale properly according to the viewport size. There are many different techniques following which you can make the images truly responsive (i.e. adjust to any viewport screen size). However, if you’re looking for simple and easy to implement responsive image solutions, then this post will hopefully serve as a good starting point for you.
Author Bio: This post is brought to you by Samuel Dawson, working as front-end developer for Designs2HTML Ltd. a leading PSD to HTML Service company and he shares concrete information, latest trend & tips on front-end development technologies.
First-class article – exactly what I was looking for