Simplified sizes example.

scottjehl · Apr 23, 2014 · d4d4932 · d4d4932
1 parent 37cfd8c
commit d4d4932
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/examples/demo-01.html b/examples/demo-01.html
@@ -20,16 +20,14 @@
 
 
 		<h3>An img with "srcset" and sizes" attributes:</h3>
-<pre><code>&lt;img sizes=&quot;(max-width: 30em) 100%, (max-width: 50em) 75%, 50%&quot;
+<pre><code>&lt;img sizes=&quot;100%, (min-width: 40em) 80%&quot;
 srcset=&quot;../examples/images/pic-small.png 400w, ../examples/images/pic-medium.png 800w, ../examples/images/pic-large.png 1200w&quot; alt=&quot;Obama with soldiers&quot;&gt;
 </code></pre>
 
 		<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>
 
-		<img sizes="(max-width: 30em) 100%, (max-width: 50em) 75%, 50%"
-				srcset="../examples/images/pic-small.png 400w, ../examples/images/pic-medium.png 800w, ../examples/images/pic-large.png 1200w" alt="Obama with soldiers">
-
-
+		<img sizes="100%, (min-width: 40em) 80%"
+				srcset="examples/images/pic-small.png 400w, examples/images/pic-medium.png 800w, examples/images/pic-large.png 1200w" alt="Obama with soldiers">
 
 	</body>
 </html>
diff --git a/index.html b/index.html
@@ -82,13 +82,13 @@ <h3 id="img-sizes">Using <code>img</code> with <code>srcset</code> &amp; <code>s
 		<p>The <code>sizes</code> syntax is used to define the size of the image across a number of breakpoints. <code>srcset</code> then defines an array of images and their inherent sizes. It's beyond the scope of this guide to get into much detail about how to use the new <code>srcset</code> &amp; <code>sizes</code> attributes, so we'd recommend reading the following post by Eric Portis: <a href="http://ericportis.com/posts/2014/srcset-sizes/">Srcset and Sizes</a>. Read that first, then check out the demos below!</p>
 
 		<h3>An img with "srcset" and sizes" attributes:</h3>
-<pre><code>&lt;img sizes=&quot;(max-width: 30em) 100%, (max-width: 50em) 75%, 50%&quot;
+<pre><code>&lt;sizes="100%, (min-width: 40em) 80%&quot;
 srcset=&quot;examples/images/pic-small.png 400w, examples/images/pic-medium.png 800w, examples/images/pic-large.png 1200w&quot; alt=&quot;Obama with soldiers&quot;&gt;
 </code></pre>
 
 		<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>
 
-		<img sizes="(max-width: 30em) 100%, (max-width: 50em) 75%, 50%"
+		<img sizes="100%, (min-width: 40em) 80%"
 				srcset="examples/images/pic-small.png 400w, examples/images/pic-medium.png 800w, examples/images/pic-large.png 1200w" alt="Obama with soldiers">
 
 		<p><a href="examples/demo-01.html">View standalone demo</a></p>