html - div 拉伸包含画布

Question

嗨，我想拥有这个：

<div>
<canvas height="300px" width="200px"></canvas>
</div>

我创建了 javascript 来渲染画布，有人可以建议如何根据画布大小拉伸 div 以及是否可以在没有 javascript 的情况下进行拉伸？我已经尝试过嵌套 div 的解决方案，但没有奏效。谢谢

Answer 1

使用不同display的包含div然后事情应该工作（另见这个 jsfiddle）：

<div>
    <canvas height="300px" width="200px"></canvas>
</div>

CSS：

div {
    border: 2px solid blue; /* demo purposes */
    display: inline-block;
    line-height: 0;
}
canvas {
    background-color: khaki; /* demo purposes */
}

PS。line-height: 0那里是为了确保在画布下方没有呈现任何空间。另请参阅此问题。

Answer 2

if you can determine when your canvas size is changed then fire a event that will set the dimensions of the div dynamically as according to the changed dimensions of the canvas