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 🙂
Contents
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!
THANK YOU!
THIS IS GREAT! – and who care about bandwidth- this is not 1997
While it does the trick, I’d not really recommend using it: even on a smart phone with a tiny viewport it would load the complete size of the full picture, thus wasting up the small bandwith of mobile connections.