A definitive guide on creating responsive images using CSS
- Feb 5th, 2015
- 2 Comments
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.
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; }
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:
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:
img { width: 47%; display: inline-block; }
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:
.three-columns { width: 31%; display: inline-block; }
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%; }
Below is the HTML And CSS code that will allow images to be displayed as per the following formats:
/* 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!
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.