Table of Contents
If you stay glued to the web, then you’ll probably be aware of the fact that people are using mobile devices to a great extent compared to desktop systems.
This is why many website owners and companies are becoming more inclined towards implementing responsive web design (RWD).
When it comes to creating a responsive design, it is important to understand that it involves paying due attention to a set of techniques. One such technique requires you to make the images responsive. Sadly, implementing responsive images is one of the most challenging aspects of the RWD approach.
Through this post, I intend to help you learn about how you can use CSS for making your images responsive.
Create a Simple Fluid Image Instead of Fixed One
In order to make your images responsive, you need to make them fluid rather than being fixed. This can be achieved by using “percentage-length” or “rel units” in place of pixels. In fact, the best solution is to make use of relative unit. For this purpose, you’ll need to setup the image to max-width (i.e. 100%) using the following CSS code:
img {
max-width: 100%;
height: auto;
}
Assigning the CSS property ‘max-width, to the element, helps to display the image in accordance to its native dimension unless it adjusts within the HTML container. So, if the browser window narrows your image will automatically scale corresponding to the size of the window.
This approach works really well, however, it comes with a certain limitations:
• As soon as the viewport size across the Smartphone reduces, the image having greater native dimension in comparison to the width of Smartphone small screen will begin to rule over the document. And so, the image will scale and will become larger in size than the text displayed on the small size viewport. This means that it the image will overlap the text.
• This approach is not suitable for “Retina images”, unless the native size of the image becomes equivalent to the complete width of the container.
• The height and the width of the image isn’t set explicitly in the CSS. And so, the browser won’t be keeping up space for storing the image. This will make the image layout to explode. Put it simply, it will make the image size exceed than the size of the page or device screen it is being viewed on.
Setting the size of your image to max-width is a useful solution for adding responsive images in your page header. In addition, it also work well in case you’re using article with “hero” images. But, for adding responsive images in the body text, you will have to look for a better approach.
How to Implement Responsive Images Using a Better Approach?
A better (or you can say a complex) approach, you can use to implement responsive images requires you to calculate the width of the image in ‘%’ corresponding to the complete width of the web page.
For example, let us assume you have an image having native dimension of 600px × 400px in an HTML document that is 1400px wide. This means that the document will be responsive below 1400px. Now, you can measure the image width in the form of percentage as: (600/1400) × 100 = 42.85%
Make use of the above calculated width to obtain the width of the image. And then, simply set the width of the image inline using the below mentioned CSS code:
img {
float: right;
width: 41.66%;
margin-left: 2rem;
}
This approach can be used for retina-images for viewport of varied sizes, and helps to keep your images properly synchronized with the text of your document. But, you may face an issue with retina pixel-doubled images when they’re being accessed on very large size or small-size viewport. You can solve this problem, by assigning your image a “max and/or min” width in pixels:
img {
float: right;
width: 42.85%;
margin-left: 2rem;
max-width: 600px;
}
Conclusion
Here’s hoping that reading this post will help you better understand the significance of responsive images. Additionally, you’ll learn about the different approaches you can use to make the images responsive and implement them in your web pages
