I want my canvas to be as large as possible, but keep the aspect ratio. It should work if the screen gets less wide as well as when its height decreses.Basically, I want the screen at the top of the page as wide as possible, but always keep the aspect-ratio. Never let it overflow.
This works fine now, but for vers small screen (small width), I have a large vertical space at the top and the bottom of the canvas.
I fiddled a bit around, but could not find a solution for it. Can you please assist me?
<html><head><style> #screen { margin: 2em; /* Available space after margins */ width: calc(100vw - 4em); height: calc(100vh - 4em); } /* Stay small, not absolutely needed*/ .constrain-container { display: flex; height: 100%; } .constrain-height { display: flex; min-width: 0; width: auto; height: 100%; aspect-ratio: 320/200; margin: auto; } .constrain-width { display: flex; min-width: 0; width: 100%; height: auto; aspect-ratio: 320/200; margin: auto; } canvas { width: 100%; height: 100%; border: 1px solid red; }</style><body><div id="screen"><div class="constrain-container"><div class="constrain-height"><div class="constrain-width"><canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas></div></div></div></div><br/><p>Move this this up</p></body></html>