Now I am going to tell how to create a responsive image using css. Image will shrink based on screen resolution.  That means the image will flex to fit its parent container.Try resizing your browser to see responsive images in action.

By using this simple technique you can create responsive image galleries as well 🙂

Responsive Image using CSS
Responsive Image using CSS

CSS Code for Responsive Image

.responsive img {
	max-width:100%;
	/*width:100%;*/
	height: auto;
}

HTML Usage

<p><span class="responsive"><img src="http://w3lessons.info/wp-content/uploads/2013/01/responsive-image.jpg" width="1600" height="1244"  /></span></p>

View Demo

Try resizing your browser to see responsive images in action

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!

Related Posts