无法使 canvas 元素高度等于容器高度
Can't get canvas element height to equal container height
我正在尝试将一系列 canvas 元素设置为与其容器相同的高度:
$(document).ready(function() {
var c = $('.canvas canvas');
var container = $(c).parent();
$(window).resize(respondCanvas);
function respondCanvas() {
c.each(function(index) {
$(this).attr('width', $(container[index]).width());
$(this).attr('height', $(container[index]).height());
});
}
respondCanvas();
});
.flex {
display: flex;
overflow: auto;
}
#viewport {
flex: 1 0 100%;
flex-flow: row wrap;
justify-content: space-between;
}
.canvas {
display: flex; /* new addition from answer */
background: #ccc;
margin: 0.25rem;
}
#half-breadth,
#profile {
flex: 1 0 100%;
}
#body-plan,
#current-section,
#rendering {
flex: 1 0 32%;
}
canvas {
flex: auto; /* new addition from answer */
background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="viewport" class="flex">
<div id="half-breadth" class="canvas">
<canvas id="half-breadth-canvas"></canvas>
</div>
<div id="profile" class="canvas">
<canvas id="profile-canvas"></canvas>
</div>
<div id="body-plan" class="canvas">
<canvas id="body-plan-canvas"></canvas>
</div>
<div id="current-section" class="canvas">
<canvas id="current-section-canvas"></canvas>
</div>
<div id="rendering" class="canvas">
<canvas id="rendering-canvas"></canvas>
</div>
</figure>
在 Google Chrome 中至少在 OS X 中,canvas 小于包含 div 元素的高度,并且在最后3个,少的量各不相同。如果没有 flex 布局,所有内容都比容器小。有什么方法可以使它们实际上完全相同吗?理想情况下也可以在使用 flex 时进行修复?
此时,我不关心浏览器compatibility/portability(我使用的是flex,所以我已经决定活在最前沿),但我确实需要使用canvas 据我所知的属性,因为我不想扭曲内容(即我不能使用 CSS 100% width/height)。
更新:将 CSS 添加到代码片段以反映答案中提供的已接受解决方案(请参阅 CSS 中的评论)。
canvas 元素不是视口的直接子元素,因此您必须将 display:flex
添加到 .canvas class 并指示 canvas 到成为 flex:auto
.
我正在尝试将一系列 canvas 元素设置为与其容器相同的高度:
$(document).ready(function() {
var c = $('.canvas canvas');
var container = $(c).parent();
$(window).resize(respondCanvas);
function respondCanvas() {
c.each(function(index) {
$(this).attr('width', $(container[index]).width());
$(this).attr('height', $(container[index]).height());
});
}
respondCanvas();
});
.flex {
display: flex;
overflow: auto;
}
#viewport {
flex: 1 0 100%;
flex-flow: row wrap;
justify-content: space-between;
}
.canvas {
display: flex; /* new addition from answer */
background: #ccc;
margin: 0.25rem;
}
#half-breadth,
#profile {
flex: 1 0 100%;
}
#body-plan,
#current-section,
#rendering {
flex: 1 0 32%;
}
canvas {
flex: auto; /* new addition from answer */
background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="viewport" class="flex">
<div id="half-breadth" class="canvas">
<canvas id="half-breadth-canvas"></canvas>
</div>
<div id="profile" class="canvas">
<canvas id="profile-canvas"></canvas>
</div>
<div id="body-plan" class="canvas">
<canvas id="body-plan-canvas"></canvas>
</div>
<div id="current-section" class="canvas">
<canvas id="current-section-canvas"></canvas>
</div>
<div id="rendering" class="canvas">
<canvas id="rendering-canvas"></canvas>
</div>
</figure>
在 Google Chrome 中至少在 OS X 中,canvas 小于包含 div 元素的高度,并且在最后3个,少的量各不相同。如果没有 flex 布局,所有内容都比容器小。有什么方法可以使它们实际上完全相同吗?理想情况下也可以在使用 flex 时进行修复?
此时,我不关心浏览器compatibility/portability(我使用的是flex,所以我已经决定活在最前沿),但我确实需要使用canvas 据我所知的属性,因为我不想扭曲内容(即我不能使用 CSS 100% width/height)。
更新:将 CSS 添加到代码片段以反映答案中提供的已接受解决方案(请参阅 CSS 中的评论)。
canvas 元素不是视口的直接子元素,因此您必须将 display:flex
添加到 .canvas class 并指示 canvas 到成为 flex:auto
.