root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 12 Packages Projects Releases Wiki Activity

fixes #4935: properly comment responsive image techniques and add CSS tests to support

This commit is contained in:
Mark Otto 2012-09-03 17:35:35 -07:00
parent 8cda830eaf
commit acf2a64016
2 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
less/reset.less
View File

@ -77,9 +77,11 @@ sub {
// ------------------------- // -------------------------
img { img {
max-width: 100%; // Make images inherently responsive /* Responsive images (ensure images don't scale beyond their parents) */
max-width: 100%; /* Part 1: Set a maxium relative to the parent */
width: auto\9; /* IE7-8 need help adjusting responsive images */ width: auto\9; /* IE7-8 need help adjusting responsive images */
height: auto; // Make images inherently responsive height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle; vertical-align: middle;
border: 0; border: 0;
-ms-interpolation-mode: bicubic; -ms-interpolation-mode: bicubic;

38
less/tests/css-tests.html
View File

@ -98,6 +98,44 @@
<!-- Responsive images
================================================== -->
<div class="page-header">
<h1>Responsive images</h1>
</div>
<div class="row">
<div class="span4">
<img src="http://placehold.it/600x600" height="200">
</div>
<div class="span4">
<img src="http://placehold.it/600x600">
</div>
<div class="span4">
<img src="http://placehold.it/600x600">
</div>
</div>
<br>
<div class="row">
<div class="span4">
<img src="http://placehold.it/600x900" style="width: 200px;">
</div>
<div class="span4">
<img src="http://placehold.it/200x300">
</div>
<div class="span4">
<img src="http://placehold.it/600x600">
</div>
</div>
<br><br>
<!-- Fluid grid <!-- Fluid grid
================================================== --> ================================================== -->