{ A destination to learn coding }

How to make an image responsive

Mike Kotsch

Almost 55-60 % of the users use mobile devices to browse the websites. So it is necessary to make a website responsive and make sure it serves and looks good on every device, irrespective of its size.
The above image is responsive, i.e. the image scales and fits the page when the browser window is resized.
Resize the browser size to see how it works.

Making a responsive image is very simple. We need to define either the width or the height, which ever the situation demands and set the other property's value to auto.

Html Script

<!--By using inline css-->
<img src="http://letzcode.in/HtmlCss/images/monsoon.jpg" style="width:100%; height:auto;">

<!--By using class selector and internal/external css-->
<img src="http://letzcode.in/HtmlCss/images/monsoon.jpg" class="responsive">
CSS code