Blog - Latest News

Solutions to Creating Responsive Images Using CSS

Images are one of the most important element of our website that provide visitors with engaging content. This is why, similar to other components of your responsive website design even images should fit to mobile device screens and resolutions. Even though, we have successfully located techniques to create great responsive website, we fail to make the website images adaptable to different screen sizes and resolutions. However, to make our design completely responsive, we also need to make our images responsive.

When designing a responsive layout, the content is usually divided into blocks that are resized, so that the content is displayed perfectly on various device variants. Apart from content, the blocks also contains images.

When the size of block is larger compared to an image, there is nothing to fret. But, you may face issues when the block needs to be resized to a smaller size than the image. This is simply because, the image will force the block to adjust to same size as that of the image. On the other hand, expanding your content block can break your layout.

Put it simply, in many situations content blocks won’t use the device screen according to the correct width; and as a result you may not be able to make your image(s) responsive. In that case, setting a max-width CSS property on the responsive image can prove a viable solution to the problem. Additionally, there are several other solutions as well that you can choose to follow.

Through this post, I would like to throw light on different solutions to creating responsive images using CSS.

Creating Responsive Images Using ‘max-width Property’ of CSS

Using mid-width CSS property on images, you can ensure that the image can be reduced, so that it can fit into its content block (when size of the content block is smaller and cannot hold the image). This can be done as follows:

<img src=”…” style=”max-width:100%” >

Here the max-width CSS property is set to 100%, which will make certain that the image do not exceed in width than 100% (than the width of its parent element’s).

Next, in order to ensure that all browsers are able to handle resizing of your image in the proper manner, set your image’s height property to auto that looks something like:

<img src=”…” style=”max-width:100%; height:auto;” >

Following this, the browsers will calculate the resized image height on the basis of its width, which helps in preserving the image original aspect ratio.

Scaling a Responsive Image

At times, your content block may be larger in size compared to the image. In such as case, you may want to resize the image in a manner that it fills its content block, hardly leaving any blank space around the image. For this purpose, you will need to set your image width property to 100% plus the height property should be set to auto. Here you won’t need to use the max-width CSS property.

<img src=”…” style=”width:100%; height:auto;” >

This way you can scale the image to fit its content block regardless of whether it is bigger or smaller in size than the image.

Creating Responsive Images For Different Screen Sizes

Another problem you might encounter when creating responsive images, is that at times the width of the content block (that contains your image) may be big, where even resizing (or scaling) the images won’t work. And a possibility is that you may choose different images for screens having different sizes. Here, you will require a completely different aspect ratio, showing only a specific part of the image or a totally different image.

But, an unfortunate reality is that CSS as of now don’t have a way that can specify different image sources based on the screen size. A viable solution to this problem, is to choose the CSS background images and combine it with CSS media queries, so that you can select images of different versions for different screen sizes (except that the chosen images will be background images). Below is a sample of CSS that helps to accomplish this:

#div {
width: 100%
@media only screen and (max-width: 600px) {
#image1 {
background-image: url(“image-small.png”);
@media only screen and (min-width: 601px) and (max-width: 900px) {
#image1 {
background-image: url(“image-medium.png”);
@media only screen and (min-width: 901px)  {
#image1 {
background-image: url(“image-large.png”);

<div id=”image1″></div>

A word of caution, this approach is not suitable for mobile devices having limited bandwidth. That’s because, in this solution you won’t be able to have control on whether the browser is downloading only a single or all of the images. In general, browser only chooses one image for downloading, but it might download all, so that the page can render all the images quickly later. And so, mobile devices will end up downloading plenty of images, which will make it work slowly.

That’s it! I hope reading this post will help you learn about some basic solutions that can help you in making your website images responsive.

This post is brought to you by Samuel Dawson, working as front-end developer for Designs2HTML Ltd. a leading PSD to HTML company and he shares concrete information, latest trend on conversion of wordpdress into social platform & tips on front-end development technologies.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Icons made with love by - Enfold Theme by Kriesi