Css 在flexbox内按比例缩放画布

假设我有以下HTML：

<div>
  <canvas class="colorPicker" width="800" height="800"></canvas>
  <canvas class="colorPicker" width="800" height="800"></canvas>
</div>

画布没有按比例缩放。它们比宽的高。当我在画布上绘制圆时，这是可见的

（JSFiddle:）

为什么会这样

如果我在父div中不使用flexbox，画布将正确缩放

此外，我必须指定

宽度：50%

，这似乎很奇怪<代码>弹性收缩被忽略，即使我指定了基准

---

如何根据父flexbox的宽度自动按比例缩放画布行？

您需要设置

对齐项目

，因为默认情况下其值为

拉伸

document.addEventListener（'DOMContentLoaded'，（e）=>{
document.querySelectorAll（'canvas.colorPicker'）.forEach（（canvas）=>{
const ctx=canvas.getContext（'2d'）；
const centerX=canvas.width/2；
const centerY=canvas.height/2；
常数半径=数学最小值（canvas.width、canvas.height）/2；
//底部为白色圆圈，因此中间为全色
ctx.beginPath（）；
ctx.弧（中心x，中心y，半径/2,0,2*Math.PI，假）；
ctx.closePath（）；
ctx.fillStyle='#fff'；
ctx.fill（）；
对于（让角度=0；角度画布{
柔性生长：1；
弹性收缩：1；
宽度：50%；
}

适合我，谢谢。：-）有没有想过为什么我必须指定宽度，而它们不会根据div中的项目数自动按比例调整大小？@Brad这是因为您已经定义了内联，默认情况下，最小宽度将设置为自动宽度…您可以尝试添加最小宽度：0，然后删除宽度：50%，看看会发生什么；）不幸的是，因为这些是画布，所以必须在元素上定义宽度和高度。设置

min width:0

和删除

width:50%

会让我返回拉伸元素。@Brad是的，当然，你必须定义它们，我只是解释了为什么即使使用flex grow也会得到这个结果。因为默认设置是min width:au在您的情况下，它是800px，并且flex项目不能收缩超过此大小，这就是为什么您必须强制使用宽度：50%；）…但是当您添加最小宽度：0时，flex grow按照您的预期工作

div {
  display: flex;
  width: 100%;
  overflow: hidden;
}

div > canvas{
  flex-grow: 1;
  flex-shrink: 1;
  width: 50%;
}