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

diff --git a/less/reset.less b/less/reset.less
index 3261124e0f8b98c5e992a193c988a2863bcd8800..2901a85c80ddb08c8432931874ecd2dd448e9e22 100644 (file)
--- 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 4715143397ac9d76cf7918dd330df78376e27be5..c0cb1485e983f4cb524d89b17af10e999e9def88 100644 (file)
--- 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
 ================================================== -->