[css-easing-2] Avoid image layout shift

Author: jakearchibald

css-easing-2/Overview.bs

@@ -42,6 +42,10 @@ Repository: w3c/csswg-drafts
 </pre>
 
 <style>
+  .easing-graph {
+    max-width: 400px;
+    width: 100%;
+  }
   @media (prefers-color-scheme: dark) {
     .easing-graph {
       background: none;
@@ -72,7 +76,7 @@ input progress value and producing a corresponding transformed output progress
 value.
 
 <figure>
-  <img class="easing-graph" src="easing-function-example.svg" width="400"
+  <img class="easing-graph" src="easing-function-example.svg" width="535" height="510"
     alt="Example of an easing function that produces an ease-in effect.">
   <figcaption>
     Example of an easing function that produces an ease-in effect.<br>
@@ -330,7 +334,7 @@ It returns an [=output progress value=].
   that moves linearly from 0, to 0.25, then to 1:
 
   <figure>
-    <img class="easing-graph" src="simple-linear-example.svg" width="400"
+    <img class="easing-graph" src="simple-linear-example.svg" width="535" height="510"
       alt="linear(0, 0.25, 1) plotted on a graph">
   </figure>
 </div>
@@ -343,7 +347,7 @@ It returns an [=output progress value=].
   then the last 25% transitioning from ''.25'' to ''1'':
 
   <figure>
-    <img class="easing-graph" src="linear-with-input-example.svg" width="400"
+    <img class="easing-graph" src="linear-with-input-example.svg" width="535" height="510"
       alt="linear(0, 0.25 75%, 1) plotted on a graph.
         The graph has three points.
         The first is at 0,0.
@@ -360,7 +364,7 @@ It returns an [=output progress value=].
   producing the following easing function:
 
   <figure>
-    <img class="easing-graph" src="linear-with-double-input-example.svg" width="400"
+    <img class="easing-graph" src="linear-with-double-input-example.svg" width="535" height="510"
       alt="linear(0, 0.25 75%, 1) plotted on a graph.
         The graph has four points.
         The first is at 0,0.
@@ -376,7 +380,7 @@ It returns an [=output progress value=].
   For example, here are the implicit values from the previous function:
 
   <figure>
-    <img class="easing-graph" src="linear-with-double-input-example-continued.svg" width="400"
+    <img class="easing-graph" src="linear-with-double-input-example-continued.svg" width="535" height="510"
       alt="linear(0, 0.25 75%, 1) plotted on a graph.
         The graph has four points.
         The first is at 0,0.
@@ -414,7 +418,7 @@ It returns an [=output progress value=].
   so inputs greater than 1 always output 1.
 
   <figure>
-    <img class="easing-graph" src="linear-bounce-example.svg" width="400"
+    <img class="easing-graph" src="linear-bounce-example.svg" width="535" height="510"
       alt="The graph of a rough bounce easing.">
   </figure>
 
@@ -461,7 +465,7 @@ The <var>x</var> coordinates of <var>P1</var> and <var>P2</var>
 are restricted to the range [0, 1].
 
 <figure>
-  <img class="easing-graph" src="cubic-bezier-easing-curve.svg" width="400"
+  <img class="easing-graph" src="cubic-bezier-easing-curve.svg" width="535" height="510"
       alt="A cubic Bezier curve used as an easing function.">
   <figcaption>
     A cubic B&eacute;zier curve used as an easing function.<br>