简而言之:这里有一个完整的页面示例:https://jsfiddle.net/rfp8xv6g/show(可在此处进行编辑:https://jsfiddle.net/rfp8xv6g),如何使画布(带有紫色边框)在垂直方向上完全包含在容器中,而不需要硬编码高度?
这里有一个简化的例子。我有以下布局(在片段中点击“全屏”以查看它)。
左列包含一个包含多个<canvas>
的包装器,这些画布彼此叠放(这里仅为简单起见只有一个画布)。
问题:如果画布的宽度/高度很高(在画布坐标系中,这里是4000x3000),则完整的画布不可见(高度太高,超出了视口)。
如何使画布缩放/收缩以包含在左列中?(没有页面垂直滚动条)
这里max-width: 100%;
可以用于水平包含画布。
但是max-height: 100%;
没有任何效果:画布在垂直方向上没有被包含,为什么?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body,
.page {
height: 100%;
width: 100%;
}
.page {
background-color: red;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.left-column {
background-color: green;
display: flex;
}
.right-column {
background-color: orange;
flex: 1;
}
canvas {
border: 3px solid magenta;
max-width: 100%;
max-height: 100%;
}
<div class="page">
<div class="left-column">
<div class="canvas-wrapper">
<canvas width="4000" height="3000"></canvas>
</div>
</div>
<div class="right-column">
RIGHT
</div>
</div>