0

I have a problem scaling down canvas elements that belong to grid container.

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>

The above code shows canvas that have width: 20 and height: 60 scaled with the result aspect ratio of 1:2. What I need is a canvas element that fits into maximum grid row height and column width, and, remains constant with its aspect ratio.

4

1 回答 1

0

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

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

这个 SO 答案和问题帮助我解决了扩展问题。

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

于 2019-06-16T14:21:19.887 回答