div 拉伸包含画布答案

【问题标题】：div stretching containing canvasdiv 拉伸包含画布
【发布时间】：2012-05-18 08:55:00
【问题描述】：

嗨，我正在尝试这个：

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

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

【问题讨论】：

您的高度/宽度代码无效。试试style="height: 300px; width: 200px;"。

标签： html canvas stretching

【解决方案1】：

为包含的div 使用不同的display，然后一切正常（另请参阅this 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 用于确保画布下方没有出现space is rendered。另见this question。

【讨论】：

关于无效请看w3schools.com/html5/html5_canvas.asp，height和width属性无效不是真的...
是的，它是这样工作的：
@anjalis 当然，通过属性使用宽度/高度也很好，但在your edit 之前，它既没有正确使用样式也没有正确使用属性。我已经相应地更新了我的答案。据我所知，这应该可以回答您的问题。
有关于这个 5 像素底部边距的消息吗？我有这个确切的问题。我要问这个问题。
在此处查看相关问题：stackoverflow.com/questions/15807833/…

【解决方案2】：

如果您可以确定画布大小何时更改，则触发一个事件，该事件将根据更改后的画布尺寸动态设置 div 的尺寸

【讨论】：

它不起作用
将 div 设置为不同的display，例如inline-box。
啊，是的，错字了。我已经发布了我的建议作为带有工作小提琴和屏幕截图的答案。