如何在矩形容器中适配正方形元素？解决横竖屏适配异常问题

问题描述 #

我尝试将正方形适配到矩形容器中，使用了max-width、max-height和aspect-ratio属性，但仅在竖屏模式下生效，横屏模式下失效。竖屏时红色（canvas）和绿色（按钮）盒子能适配蓝色容器，横屏时红色盒子溢出，绿色盒子被挤到容器外。

修复方案 #

问题核心在于Grid布局的行高分配逻辑：横屏时正方形的宽度被容器拉满后，aspect-ratio强制高度等于宽度，导致超出容器可用高度，进而挤压按钮区域。以下是修改后的代码：

JavaScript（无需修改）

function portrait() {
  document.body.style.width = "10em";
  document.body.style.height = "14em";
}

function landscape() {
  document.body.style.width = "14em";
  document.body.style.height = "10em";
}

document.getElementById("button0").addEventListener('click', portrait);
document.getElementById("button1").addEventListener('click', landscape);

portrait();

CSS（关键修改）

html, body {
  margin: 0;
  height: 100%; /* 确保body高度能被子元素继承 */
}
#page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1ex solid blue;
  display: grid;
  grid-template-rows: 1fr min-content; /* 第一行占满剩余空间，第二行自适应按钮高度 */
}
.square {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  margin: auto; /* 让正方形在Grid单元格内居中，自动限制尺寸不超出单元格 */
  display: flex;
  justify-content: center;
  align-items: center;
}
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%;
}

HTML（无需修改）

<div id="page">
  <div class="square">
    <canvas width="100" height="100">
    </canvas>
  </div>
  <div class="buttons">
    <input id="button0" type="button" value="竖屏（正常）"/>
    <input id="button1" type="button" value="横屏（修复后）"/>
  </div>
</div>

修改说明 #

1. 给html, body添加height: 100%，确保#page的height:100%能正确继承到固定高度。
2. 给#page添加width:100%，让它和body宽度保持一致。
3. 将grid-template-rows从auto min-content改为1fr min-content：第一行用1fr占据容器剩余高度，避免正方形元素的高度不受控制地撑开容器。
4. 给.square添加margin: auto和弹性布局：让正方形在Grid单元格内居中，同时利用max-width/max-height和aspect-ratio自动适配单元格的最大可用空间，既保持正方形比例，又不超出容器范围。

内容的提问来源于stack exchange，提问作者ceving