I've been experimenting with fitting a square into a rectangle using max-width, max-height, and aspect-ratio. However, I encountered an issue where it only works in portrait mode, but fails in landscape mode. Here is how Firefox renders it:
https://i.sstatic.net/V2IHB.png https://i.sstatic.net/V2AdQ.png
This serves as an example of the problem.
function adjustPortrait() {
document.body.style.width = "10em";
document.body.style.height = "14em";
}
function adjustLandscape() {
document.body.style.width = "14em";
document.body.style.height = "10em";
}
document.getElementById("button0").addEventListener('click', adjustPortrait);
document.getElementById("button1").addEventListener('click', adjustLandscape);
adjustPortrait();html, body {
margin: 0;
}
#page {
height: 100%;
box-sizing: border-box;
border: 1ex solid blue;
display: grid;
grid-template-rows: auto min-content;
}
.square {
max-width: 100%;
max-height: 100%;
aspect-ratio: 1 / 1;
}
canvas {
box-sizing: border-box;
border: 1ex solid red;
display: block;
width: 100%;
height: 100%;
}
buttons {
box-sizing: border-box;
border: 1ex solid green;
width: 100%;
}<div id="page">
<div class="square">
<canvas width="100" height="100">
</canvas>
</div>
<div class="buttons">
<input id="button0" type="button" value="Works"/>
<input id="button1" type="button" value="Fails"/>
</div>
</div>Any suggestions on how to properly fit the red and green boxes into the blue box?