Update image documentation.

Author: mrmrs

docs/general/images/index.html

@@ -42,36 +42,21 @@
 </header>
 
     <main class="">
-      <article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
-        <h4 class="f4 mv0 fw6 dib mr4">tachyons-images</h4>
-        <span class="f4 b dib pl0 ml0 mr4">v1.0.3</span>
-        <span class="f4 b dib pl0 ml0 mr4">41 B</span>
-        <div>
-            <dl class="dib mr4 mt0">
-              <dt class="f6 db">Declarations </dt>
-              <dd class="db pl0 ml0 f4 f2-ns b">1</span></dd>
-            </dl>
-            <dl class="dib mr4">
-              <dt class="f6 db pr2">Selectors </dt>
-              <dd class="db pl0 ml0 f4 f2-ns b">1</dd>
-            </dl>
-            <dl class="dib mr4">
-              <dt class="f6 db pr2">Max. Specificity Score </dt>
-              <dd class="db pl0 ml0 f4 f2-ns b">1</dd>
-            </dl>
-            <dl class="dib mr4">
-              <dt class="f6 db pr2">Size of Avg. Rule </dt>
-              <dd class="db pl0 ml0 f4 f2-ns b">1</dd>
-            </dl>
-        </div>
+      <article class="bg-near-white bt b--black-10 pa3 ph5-ns">
+        <h4 class="f4 mv0 fw6 dib mr4">images</h4>
       </article>
 <div class="ph3 ph5-ns pt4 pb5">
   <h2 class="f3 bold">Examples</h2>
   <h3 class="f5 book pt4 caps">Image</h3>
-  <p class="measure lh-copy f4 f3-ns">
-    This photo is more than 3000 pixels wide. The max-width set to 100% ensures it doesn't bleed off the viewport.
+  <p class="measure lh-copy f5 f4-ns">
+    This photo is more than 3000 pixels wide. The width is set to 100% to ensure it doesn't bleed off the viewport and always fills its container. In some situations, this will make the image stretch to be larger than it's actual width. To avoid the image stretching past it's width, set max-width instead.
   </p>
-  <img src="/img/over-canvas.jpg">
+  <code class="f6 db mv3">&lt;img src="/img/over-canvas.jpg" class="w-100"&gt;</code>
+  <img src="/img/over-canvas.jpg" class="w-100">
+  <p class="f5 f4-ns lh-copy measure mt4">The image below is 720 pixels wide, it will fill it's container until the container is wider than 720 pixels.
+
+  <code class="f6 db mv3">&lt;img src="/img/under-canvas.jpg" class="mw-100"&gt;</code>
+  <img src="/img/under-canvas.jpg" class="db mw-100">
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>

img/under-canvas.jpg

@@ -15,36 +15,21 @@
 
     <%= siteHeader %>
     <main class="">
-      <article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
-        <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
-        <span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
-        <span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
-        <div>
-            <dl class="dib mr4 mt0">
-              <dt class="f6 db">Declarations </dt>
-              <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></span></dd>
-            </dl>
-            <dl class="dib mr4">
-              <dt class="f6 db pr2">Selectors </dt>
-              <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
-            </dl>
-            <dl class="dib mr4">
-              <dt class="f6 db pr2">Max. Specificity Score </dt>
-              <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></dd>
-            </dl>
-            <dl class="dib mr4">
-              <dt class="f6 db pr2">Size of Avg. Rule </dt>
-              <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
-            </dl>
-        </div>
+      <article class="bg-near-white bt b--black-10 pa3 ph5-ns">
+        <h4 class="f4 mv0 fw6 dib mr4">images</h4>
       </article>
 <div class="ph3 ph5-ns pt4 pb5">
   <h2 class="f3 bold">Examples</h2>
   <h3 class="f5 book pt4 caps">Image</h3>
-  <p class="measure lh-copy f4 f3-ns">
-    This photo is more than 3000 pixels wide. The max-width set to 100% ensures it doesn't bleed off the viewport.
+  <p class="measure lh-copy f5 f4-ns">
+    This photo is more than 3000 pixels wide. The width is set to 100% to ensure it doesn't bleed off the viewport and always fills its container. In some situations, this will make the image stretch to be larger than it's actual width. To avoid the image stretching past it's width, set max-width instead.
   </p>
-  <img src="/img/over-canvas.jpg">
+  <code class="f6 db mv3">&lt;img src="/img/over-canvas.jpg" class="w-100"&gt;</code>
+  <img src="/img/over-canvas.jpg" class="w-100">
+  <p class="f5 f4-ns lh-copy measure mt4">The image below is 720 pixels wide, it will fill it's container until the container is wider than 720 pixels.
+
+  <code class="f6 db mv3">&lt;img src="/img/under-canvas.jpg" class="mw-100"&gt;</code>
+  <img src="/img/under-canvas.jpg" class="db mw-100">
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>