A Useful Guide To Master Responsive Design Using CSS

Responsive design has revolutionized the web for obvious reasons. It’s what web design experts recommend for and the majority of site owners are migrating to. Responsive design isn’t a mere trend, but it’s a need. It’s about making your website pleasurable to browse, regardless of the device being used to view it.

Also Read: Need to Convert Raster Graphics Into Vector Graphics.


Responsive design is what can help in creating a website that gracefully adapts to the range of devices. It makes a logical use of CSS to ensure that web pages are served flawlessly across a wide range of devices, without having any need to resort to the URL direction or serving an entirely different HTML or CSS code.
A Useful Guide To Master Responsive Design Using CSS
In this tutorial, I will explain you the entire process of creating responsive images with the help of CSS. Hopefully, you find the tutorial helpful and will bookmark it for the future reference. So, let’s start.

1. Creating a Basic Responsive Image

There are a variety of ways through which responsive images can be created. All the methods vary on their level of complexity and browser compatibilities. Srcset attribute, is yet another approach of implementing responsive images. It’s a rather complicated method as you need to play around multiple images, markup, and new HTML attribute, which may or may not be supported by the modern browsers.
In srcset attribute, it’s browser’s responsibility to figure out which image works best. As a webmaster, you need to tell the browser about the images you currently have and of what size they are. It’s a bit complicated approach and demands a lot of precision.
A Useful Guide To Master Responsive Design Using CSS
However, if you are looking for a simple method of implementing responsive images then CSS can do the trick for you. The CSS method covered in this tutorial talks about CSS width and height properties, this makes sure that the images will be scaled down to fit into the device and browser. While going through the process, make sure that your web design layout is either fluid or responsive.
Now, let’s start creating a responsive image with a very basic example.


<div class=”container”><img src=”image01.jpg” width=”950″ height=”630″ /></div>


‘Div’ here acts as a container of an element. We set the ‘width’ property of container element to 95%, so that it has both right and left margins. The maximum width of the CSS property has been set to 950px, to make sure that the layout can be scaled proportionately on larger screens.
Setting the width of the element within the container to 100% makes sure that the image is never wider than its viewport’s size, so that responsive behavior can be achieved.
To make sure that all the browsers handle that image resizing accurately, we can set the CSS height property of image to auto, just like this:


div.container {width: 95%;max-width: 950px;margin: 0 auto; /* to center the container */}img {width: 100%;height: auto;}

Now, the browser will automatically calculate the height of the resized image on the basis of its width, without hampering the original image aspect ratio.

Responsive Image CSS Class

Sometimes developers set the CSS properties directly in the ‘style’ of the ‘img’ element, this isn’t a recommended approach as it’s bit tricky to achieve. Why to complicate, when you have a more simple one. You can create a responsive CSS class. Below is the example:
 A Useful Guide To Master Responsive Design Using CSS
<style>img.responsive {width : 100%; /* or max-width : 100% */height: auto;}</style><img src=”…” class=”responsive”>
Creating CSS class far simpler and recommended method for creating responsive images. In fact, there are some situations where you may or may not want images to fill the content box completely. For this two different CSS classes can be created:
<style> img.responsive-fill {width : 100%;height: auto;}img.responsive-shrink {max-width : 100%;height: auto;}</style><img src=”…” class=”responsive-fill”><img src=”…” class=”responsive-shrink”>
This way you can choose from multiple images to which responsive strategy you want to use.

Creating Responsive Images in Columns

Columns can be a great way to render images. To display responsive images in columns, simply reduce the CSS width and give element a display property value within the inline-block.

Two-column Responsive Image Layout

To create two-column layout, simply set the CSS width property to 47%, or just one half of the container. The reason behind setting the width 47% instead of 50, is this way the images can be rendered with margins on either sides.
<div class=”container”><img src=”image01.jpg” width=”950″ height=”630″ /><img src=”image02.jpg” width=”950″ height=”630″ /></div>



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

Creating Three-column Responsive Image

Creating three-column responsive image requires you to simply set the width property to one-third of the container’s width: 31%


<div class=”container”><img src=”image01.jpg” width=”950″ height=”630″ /><img src=”image02.jpg” width=”950″ height=”630″ /><img src=”image03.jpg” width=”950″ height=”630″ /></div>


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


Hopefully, you have gained a pretty good understanding on creating responsive images using CSS. The method mentioned above is simple, all done without any complicated JavaScripting or any other technique.

Leave a Reply