我有以下代码,并希望使用类 canvas-wrap
使 Canvas 与我的 div
大小相同:
#overlay {
position: absolute;
top: 20px;
width: 100%;
height: 100%;
}
.canvas-wrap {
position: absolute;
top: 20px;
width: 100%;
height: 100%;
}
<div class="canvas-wrap">
<div class="row" id="overlay">
</div>
<canvas id="myCanvas"></canvas>
</div>
不幸的是,目前它似乎默认为 150x300。如果它与类为 canvas-wrap
的 div
大小相同会更好。
有人可以解释我做错了什么并修复错误吗?
最佳答案
您没有在 Canvas 本身上设置任何样式定义。
#overlay {
position: absolute;
top: 20px;
width: 100%;
bottom: 0;
}
.canvas-wrap {
position: absolute;
top: 20px;
width: 100%;
bottom: 0px;
box-sizing: border-box;
}
.canvas-wrap canvas {
border: 1px solid magenta;
width: 100%;
height: 100%;
display: inline-block;
box-sizing: border-box;
}
body, .canvas-wrap {
padding: 0;
margin: 0;
}
<div class="canvas-wrap">
<div clas="row" id="overlay">
</div>
<canvas id="myCanvas"></canvas>
</div>
关于html - 将 Canvas 的高度和宽度设置为其包含的 div 的高度和宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39347245/