Image of Making images responsive (shrinking automatically on mobile)

A question was raised by someone as to how to make images responsive on mobile devices. valME.io uses Twitter's Bootstrap for its .css, and it's wonderful. To make images responsive, you only need to add the .img-responsive class to your image as described here:

<img src="..." class="img-responsive" alt="Responsive image" />

This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. Simple.

Written by   permalink    plaintext

And it worked beautifully! Thank you!

You need to be logged in to comment.
search only within csstemplates

About csstemplates


Based on the excellent suggestion by digdug, this community is to share style sheets/.css templates you can use for posts. If you're a .css expert, we'd welcome some experienced experts to become moderators.

Please do not redefine standard html tags in your templates (e.g., don't do this: blockquote { font-size:30px; }), as it can cause problems with comments that use those tags. Always create your own classes - e.g.:

<style>.my-blockquote { font-size:30px; }</style>
<div class="my-blockquote">my very large blockquote</div>