This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
bandolier-template/admin/bando/demos/AspectRatio.svelte

31 lines
791 B

<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;
height: 100%;
}
</style>
<aspect-test>
<div class="top-box" style="--aspect-ratio: 16/9;">
<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 style="--aspect-ratio: 10/2; background-color: var(--value7); font-size: 1.5vw;">
<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>
</aspect-test>