Css 将画布子对象缩放到父对象的宽度和高度（由布局在添加子对象之前确定） 代码笔中的最小示例：

（绿色框正在演示预期的行为，而蓝色框的行为是意外的。您可能需要调整浏览器窗口的大小，以查看蓝色框的大小并不总是与其父项的高度和宽度相匹配。我添加了填充以进行演示）

正文{
利润率：40像素；
}
.包装纸{
显示：网格；
栅隙：10px；
网格模板列：重复（自动填充，最小值（200px，1fr））；
背景色：#fff；
颜色：#444；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：10px；
字体大小：150%；
}
.a{
格线柱：自动/跨度2；
}
k{
格线柱：自动/跨度3；
}
g{
格线柱：自动/跨度2；
网格行：自动/跨度2；
}
.加油{
位置：相对位置；
身高：100%；
/*宽度：100%；这会导致子元素对于父元素来说太大*/
边界半径：5px；
}
蓝先生{
背景：天蓝色；
}
格林先生{
背景：海格林；
}

A.
正确填充父项
C
D
E
F
H
正确填充父项
J
K
L
M

我不太明白这个问题，但有一个提示给你，因为你说它与

div

一起工作，而不是

canvas

：默认情况下，

canvas

是一个内联元素，类似于

img

，因此在后面添加字符空白。也许

canvas{display:block；}

就是你所需要的吗？我还没有试过，但还是没有运气。如果有帮助的话，我想我正在为画布做我认为

对象匹配：fill

为

img

元素所做的事情。（图像在两个方向上都进行了缩放，以适应其父元素的尺寸；不一定要保持纵横比）我尝试了几种方法来解释它，也许最好说我想添加一个子元素而不改变父元素的大小。