如何将正方形装入长方形？

Question

我尝试将正方形放入长方形中。我使用了max-width、max-height和aspect-ratio，但它仅在纵向模式下有效，在横向模式下失败。这显示了 Firefox 是如何渲染它的：

这就是例子。

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();

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>

如何将红色和绿色盒子放入蓝色盒子中？

Answer 1

我已经设法使用它来工作container-type。有一些漂亮的容器单元，称为 cqmin 和 cqmax。cqmin 是内联容器和块容器大小的最小值，当纵横比发生变化时，这很方便。通过将正方形声明为容器并使用该size值而不是inline-size将画布的宽度设置为 100cqmin，它会填充网格项目的高度或宽度，具体取决于较小的容器尺寸（因为该值同时size考虑两个因素）块和内联长度）值得庆幸的是，容器查询似乎几乎得到普遍支持。

function portrait() {
  //I changed these from em to px so I could make sure the body and #page div sizes were as specified.
  document.body.style.width = "250px";
  document.body.style.height = "300px";
}

function landscape() {
  document.body.style.width = "300px";
  document.body.style.height = "250px";
}

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

portrait();

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

#page {
  height: 100%;
  border: 1ex solid blue;
  display:grid;
  grid-template-rows: 1fr auto;
}

.square {
  container-type: size; /* make it size and not inline-size so the units work for both inline and block dimensions */
}

canvas {
  border: 1ex solid red;
  display: block;
  width: 100cqmin; /* this is the secret sauce */
  aspect-ratio: 1/1;
}

.buttons {
  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="Works!!!!"/>
  </div>
</div>