From: Kevin Kirsche Date: Mon, 9 Feb 2015 15:09:44 +0000 (-0500) Subject: Fixes #15653 — Add comment which explains that how a responsive image should be centered X-Git-Tag: v3.3.4~136^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=894ec6f71419a0a7028e49a655623934f03ba24c;p=thirdparty%2Fbootstrap.git Fixes #15653 — Add comment which explains that how a responsive image should be centered Fixes #15653 — Add comment which explains that how a responsive image should be centered Redo of #15657 which I couldn't get to rebase properly after all the merges were done last night. --- diff --git a/docs/_includes/css/images.html b/docs/_includes/css/images.html index 9ce88698e0..a79a4d920e 100644 --- a/docs/_includes/css/images.html +++ b/docs/_includes/css/images.html @@ -3,10 +3,7 @@

Responsive images

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.

-
-

Center aligning images

-

Since .img-responsive changes the display type to display: block;, you can no longer align the image using text-align or any of the alignment classes. Instead, use .center-block on the image element itself.

-
+

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.

SVG images and IE 8-10

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.