Change the AspectRatio demo to let people know it's a test.

main
Zed A. Shaw 2 years ago
parent 8f515bf094
commit 7e743829b4
  1. 10
      admin/bando/demos/AspectRatio.svelte

@ -11,16 +11,20 @@
background-color: var(--value5); background-color: var(--value5);
font-size: 2.5vw; font-size: 2.5vw;
padding: 1rem; padding: 1rem;
height: 100%;
} }
</style> </style>
<aspect-test> <aspect-test>
<div class="top-box" style="--aspect-ratio: 16/9;"> <div class="top-box" style="--aspect-ratio: 16/9;">
<p>Every single visual experience that has a bounding plane has to deal with aspect ratios, whether that's a photo through a 1:1 ratio medium format camera or a 16:9 ratio 4k movie. If there's a visual bounding box around the scene then everything in the scene must deal with the ratio of the width to the height.</p> <p>16/9 Aspect Ratio. This is a test to see if the new CSS aspect-ratio property actually works.
Let me know if this is not consistently 16/9.
</p>
</div> </div>
<div style="--aspect-ratio: 10/2; background-color: var(--value7); font-size: 1.5vw;"> <div style="--aspect-ratio: 10/2; background-color: var(--value7); font-size: 1.5vw;">
<p>CSS is one of the only visual systems that has no concept of aspect ratios despite the performance benefits of knowing the aspect of a block before the contents of the block are available. If you know the aspect ratio of a block, and you know the width of the page, then you can render the block immediately because you only need <b>one</b> dimension to render both.</p> <p>10/2 Aspect Ratio. This is a test to see if the new CSS aspect-ratio property actually works.
Let me know if this is not consistently 10/2.
</p>
</div> </div>
</aspect-test> </aspect-test>

Loading…
Cancel
Save