kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

add responsive images section to docs (fixes #8734)

Browse source
This commit is contained in:
Mark Otto 2013-07-28 22:00:49 -07:00
parent e1180daca0
commit b0225c073a
1 changed files with 11 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
css.html
View file

@ -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> <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 %} {% highlight html %}
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 %} {% endhighlight %}
<h3 id="overview-type-links">Typography and links</h3> <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"> <img src="..." class="img-thumbnail">
{% endhighlight %} {% 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> </div>