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!

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/01/responsive-1024x576.jpghttp://w3lessons.info/wp-content/uploads/2013/01/responsive-150x150.jpgKarthikeyan KCSS3responsive,tips & tricks
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...