在网格容器内按比例缩小 <canvas>，以便 <canvas> 保持其纵横比

Question

我在缩小属于 grid 个容器的 canvas 个元素时遇到问题。

html * {
 font-size: 1em;
 font-family: Arial;
}

#wrapper {
 border: 1px solid green;
 display: grid;
 grid-template-columns: repeat(auto-fit, 32vmin);
 grid-auto-rows: minmax(32vmin, 43vmin);
 grid-column-gap: 0.4em;
 grid-row-gap: 0.4em;
 align-items: center;
 justify-items: center;
}

#wrapper > * {
 object-fit: contain;
 max-height: 32vmin;
 max-width: 32vmin;
 border: 1px solid black;
}

#canvas0 {
 width:20vmin;
 height:60vmin;
}

<html>
<body>
 <div id="wrapper">
  <canvas id="canvas0"></canvas>
 </div>
</body>
</html>

以上代码显示 canvas 具有 width: 20 和 height: 60 缩放结果纵横比 1:2。我需要的是一个 canvas 元素，它适合最大 grid 行高和列宽，并且其纵横比保持不变。

Answer 1

我想出了一个使用 Javascript 的解决方案。正如我现在所看到的，canvas 元素必须有自己的 width 和 height 属性，这与 CSS 属性不同。 Canvas width 和 height 是用于在 canvas 上绘图的尺寸。 CSS width 和 height 表示元素布局。

CSS plus HTML 布局与原始问题基本相同。这里和那里几乎没有变化，但总的来说是一样的。之后，我将 width 和 height 设置为 Javascript 中的每个 canvas 元素，从服务器获取尺寸和纵横比。然后我根据纵横比缩放 canvas 个元素。

这个 SO 答案和问题帮助我解决了缩放问题。

如何将一个矩形缩放到另一个矩形内可能的最大尺寸？

在网格容器内按比例缩小 <canvas>，以便 <canvas> 保持其纵横比

Scale down <canvas> within grid container so, that <canvas> retains its aspect ratio

html

javascript

css

css-grid

object-fit