rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Fixes #15653 — Add comment which explains that how a responsive image should be centered

Browse Source 
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.
This commit is contained in:
Kevin Kirsche 2015-02-09 10:09:44 -05:00 committed by Kevin Kirsche
parent 3efa9c46a4
commit 894ec6f714
1 changed files with 1 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/_includes/css/images.html
View File

@ -3,10 +3,7 @@
<h2 id="images-responsive">Responsive images</h2>
<p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code>, <code>height: auto;</code> and <code>display: block;</code> to the image so that it scales nicely to the parent element.</p>
<div class="bs-callout bs-callout-warning" id="callout-images-text-align">
<h4>Center aligning images</h4>
<p>Since <code>.img-responsive</code> changes the display type to <code>display: block;</code>, you can no longer align the image using text-align or any of the <a href="#type-alignment">alignment classes</a>. Instead, use <a href="#helper-classes-center"><code>.center-block</code></a> on the image element itself.</p>
</div>
<p>To center images which use the <code>.img-responsive</code> class, use <code>.center-block</code> instead of <code>.text-center</code>. <a href="../css/#helper-classes-center">See the helper classes section</a> for more details about <code>.center-block</code> usage.</p>
<div class="bs-callout bs-callout-warning" id="callout-images-ie-svg">
<h4>SVG images and IE 8-10</h4>
<p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>