From 894ec6f71419a0a7028e49a655623934f03ba24c Mon Sep 17 00:00:00 2001 From: Kevin Kirsche Date: Mon, 9 Feb 2015 10:09:44 -0500 Subject: [PATCH] =?UTF-8?q?Fixes=20#15653=20=E2=80=94=20Add=20comment=20wh?= =?UTF-8?q?ich=20explains=20that=20how=20a=20responsive=20image=20should?= =?UTF-8?q?=20be=20centered?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- docs/_includes/css/images.html | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) 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.