我在缩小canvas属于grid容器的元素时遇到问题。
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行高和列宽的元素，并且保持其纵横比不变。
相关分类