css 如何在flex div中创建包含width和height的画布？

oyt4ldly 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(191)

我有以下布局（单击片段中的“Full page”可以看到它）。
左列包含一个 Package 器，其中包含几个相互重叠的<canvas>（为简单起见，这里只有一个画布）。
问题：如果画布的宽度/高度很高（在画布坐标系中，这里是4000 x3000），那么整个画布是不可见的（高度太高，它会超出视口）。

如何使画布缩放/收缩以包含在左列中？（没有页面垂直滚动条）

这里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>

css

来源：https://stackoverflow.com/questions/76162222/how-to-make-a-canvas-contained-in-width-and-height-in-a-flex-div

1条答案

按热度按时间

qyswt5oh1#

当元素具有百分比高度时，父元素必须具有定义的高度。
如果父对象没有定义高度，则高度百分比简单地解析为auto。
以下是完整的解释：

Working with the CSS height property and percentage values

您至少有两个可用的解决方案：
1.在父节点上定义一个高度（.canvas-wrapper），或者在本例中更好，
1.使用viewport percentage units（例如，vh）而不是 * 百分比单位 *（%）。
对代码做一个调整：

canvas {
  border: 3px solid magenta;
  max-width: 100%;
  /* max-height: 100%; */
   max-height: 100vh; /* new */
}

* {
  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%; */
   max-height: 100vh; /* new */
}

<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>

赞(0）回复(0）举报 2023-05-08

我来回答

css 如何在flex div中创建包含width和height的画布？

1条答案

相关问题

热门标签

最新问答