Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive
class. This applies max-width: 100%;
, height: auto;
and display: block;
to the image so that it scales nicely to the parent element.
To center images which use the .img-responsive
class, use .center-block
instead of .text-center
. See the helper classes section for more details about .center-block
usage.
In Internet Explorer 8-10, SVG images with .img-responsive
are disproportionately sized. To fix this, add width: 100% \9;
where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
Add classes to an <img>
element to easily style images in any project.
Keep in mind that Internet Explorer 8 lacks support for rounded corners.