From: Mark Otto <otto@github.com>
Date: Mon, 29 Jul 2013 05:00:49 +0000 (-0700)
Subject: add responsive images section to docs (fixes #8734)
X-Git-Tag: v3.0.0~111
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b0225c073a714c8172d6d59f9b21fc669f1cf747;p=thirdparty%2Fbootstrap.git

add responsive images section to docs (fixes #8734)
---

diff --git a/css.html b/css.html
index 60a5c8d6a6..095be1deb1 100644
--- a/css.html
+++ b/css.html
@@ -29,6 +29,12 @@ base_url: "../"
     <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
 {% highlight html %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+{% endhighlight %}
+
+    <h3 id="overview-responsive-images">Responsive images</h3>
+    <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> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
+{% highlight html %}
+<img src="..." class="img-responsive" alt="Reponsive image">
 {% endhighlight %}
 
     <h3 id="overview-type-links">Typography and links</h3>
@@ -1778,6 +1784,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <img src="..." class="img-thumbnail">
 {% endhighlight %}
 
+    <div class="bs-callout bs-callout-warning">
+      <h4>Responsive images</h4>
+      <p>Looking for how to make images more responsive? <a href="../css#overview-responsive-images">Check out the responsive images section</a> up top.</p>
+    </div>
+
   </div>