CSS: Maximieren Sie DIV und halten Sie das Aspektverhältnis bei ⇐ CSS

[Anonymous]

Ich möchte, dass meine Leinwand so groß wie möglich ist, aber das Seitenverhältnis aufbewahrt. Es sollte funktionieren, wenn der Bildschirm weniger breit wird und wenn seine Höhe abnimmt. Lassen Sie es niemals überlaufen. Kannst du mir bitte helfen?

Code: Select all

#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;
}< /code>










Move this this up