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.