[css-sizing-4] Add aspect-ratio examples

Author: fantasai

css-sizing-4/Overview.bs

@@ -103,9 +103,59 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
 
 	ISSUE: Clarify interaction with intrinsic size keywords like ''width/min-content'' etc.
 
-	ISSUE: Add examples
+	<div class="example">
+		This example sets each item in the grid to render as a square,
+		determining the number of items and their widths by the available space.
+
+		<xmp highlight="html">
+		  <ul>
+		    <li>…
+		    <li>…
+		    <li>…
+		    <li>…
+		  </ul>
+		</xmp>
+		<pre highlight="css">
+			ul {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
+			}
+			li {
+				aspect-ratio: 1/1;
+				overflow: auto;
+			}
+		</pre>
+	</div>
+
+	<div class="example">
+		This example uses the <{iframe}> element’s
+		<code>width</code> and <code>height</code> attributes
+		to set the 'aspect-ratio' property,
+		giving the iframe an aspect ratio to use for sizing
+		so that it behaves exactly like an image with that aspect ratio.
+		<!-- https://twitter.com/ausi/status/1053013616239288320 -->
+		<pre highlight="html">
+			&lt;iframe
+			  src="https://www.youtube.com/embed/0Gr1XSyxZy0"
+			  width=560
+			  height=315>
+		</pre>
+		<pre highlight="css">
+			@supports (aspect-ratio: attr(width px) / 1) {
+			  iframe {
+			    aspect-ratio: attr(width px) / attr(height px);
+			    width: 100%;
+			    height: auto;
+			  }
+			}
+		</pre>
+		ISSUE: Can we just slip this 'aspect-ratio' rule
+		into the UA default style sheet for images,
+		so that they have an aspect ratio while they load?
+		This would avoid the need for extra reflows after loading.
+	</div>
 
-<h3 id="min/max-ratio">
+<h3 id="from-ratio">
 Aspect Ratio Limits Option A: the ''from-ratio''</h3>
 
 	<pre class="partial propdef">
@@ -149,7 +199,7 @@ Aspect Ratio Limits Option A: the ''from-ratio''</h3>
 		</pre>
 	</div>
 
-<h3 id="min/max-ratio">
+<h3 id="ar-width-height">
 Aspect Ratio Limits Option B: the ''ar'' unit</h3>
 
 	<pre class="partial propdef">
@@ -413,7 +463,7 @@ Contain-fit Sizing: stretching while maintaining an aspect ratio</h3>
 	Contain-fit sizing essentially applies stretch-fit sizing,
 	but reduces the size of the box in one axis
 	to maintain the box’s intrinsic aspect ratio,
-	similar to the ''contain'' keyword of the 'object-fit' and 'background-size' properties.
+	similar to the ''object-fit/contain'' keyword of the 'object-fit' and 'background-size' properties.
 
 	First, a target rectangle is determined: