diff options
| author | Mark Otto <markotto@twitter.com> | 2012-09-04 04:35:35 +0400 |
|---|---|---|
| committer | Mark Otto <markotto@twitter.com> | 2012-09-04 04:35:35 +0400 |
| commit | acf2a64016a94c2017ab8aa0ec694835ee1ea42c (patch) | |
| tree | 9a47b7254fc6c0b0b95213dfc42d0e12a41c884d | |
| parent | 8cda830eaf568be8204a96ca635c0bed373028ff (diff) | |
fixes #4935: properly comment responsive image techniques and add CSS tests to support
| -rw-r--r-- | less/reset.less | 6 | ||||
| -rw-r--r-- | less/tests/css-tests.html | 38 |
2 files changed, 42 insertions, 2 deletions
diff --git a/less/reset.less b/less/reset.less index 3261124e0f..2901a85c80 100644 --- a/less/reset.less +++ b/less/reset.less @@ -77,9 +77,11 @@ sub { // ------------------------- 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 */ - height: auto; // Make images inherently responsive + height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ + vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 4715143397..c0cb1485e9 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -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 ================================================== --> |