You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
1.1 KiB
27 lines
1.1 KiB
2 years ago
|
<style>
|
||
|
|
aspect-test {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-box p {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
background-color: var(--value5);
|
||
|
|
font-size: 2.5vw;
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<aspect-test>
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</aspect-test>
|