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-website/admin/bando/demos/AspectRatio.svelte.md

998 B

Because CSS doesn't really support aspect ratios (despite a standard that says it does) you'll have a difficult time positioning and sizing many elements on the page. The --aspect-ratio hack I've put into static/global.css does a decent job of creating a fake aspect ratio system without too many changes to your HTML. You only need to add:

style="--aspect-ratio: 16/9"

And the magic CSS should do what you want. It's a trick I've taken from an article on CSS tricks that gives an excellent solution that doesn't require crazy changed to your CSS or HTML. You can also use 16/9 or decimal notation 1.4.

Limitations

As you change the size of this demo you'll see the limitation of this method. As the boxes shrink the text will explode out of the "box" that CSS has, or the boxes will cover other boxes. It's best to have only 1 or 2 elements that use --aspect-ration and test it at various sizes.