CSS实现Canvas最大化并保持宽高比的问题求助

嘿，我看了你遇到的Canvas适配问题，这不就是做可视化页面时经常碰到的「等比缩放不留白」需求嘛！你想要Canvas尽可能占满可用空间但严格守住320/200的宽高比，现在小宽度屏幕上下出大空白、下面的文本还被挤得靠下，这问题我帮你捋捋～

先说说你现有代码的小问题：你套了两层constrain容器其实完全没必要，而且#screen强制用calc(100vh - 4em)固定高度，就算Canvas因为窄屏缩成小尺寸，容器高度还是占满视口剩余空间，自然就留出了上下空白，下面的p标签也被顶下去了。

给你一个更简洁靠谱的方案，核心就是让容器高度自适应Canvas的实际尺寸，而不是硬锁视口高度，用一层容器就能搞定等比约束：

修改后的完整代码 #

<div id="screen">
  <div class="canvas-wrapper">
    <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
  </div>
</div>
<p>Move this up</p>

/* 先重置全局默认样式，避免浏览器自带边距搞乱排版 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#screen {
  margin: 2em;
  /* 宽度占满视口减边距，高度不固定，自适应内容 */
  width: calc(100vw - 4em);
  /* 给容器设最大高度，防止内容超出视口 */
  max-height: calc(100vh - 4em);
}

.canvas-wrapper {
  /* flex布局让Canvas在容器里居中，同时容器自适应宽高 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 限制容器最大尺寸，确保不超出父容器 */
  max-width: 100%;
  max-height: 100%;
}

canvas {
  /* 关键：用max-width/max-height + aspect-ratio实现等比缩放 */
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 320/200;
  border: 1px solid red;
}

p {
  margin: 0 2em; /* 和screen的边距保持一致，排版更协调 */
}

为啥这个方案能解决问题？ #

• 去掉了冗余的嵌套容器，结构清爽多了
• #screen不再固定高度，而是跟着Canvas的实际高度走，窄屏时Canvas缩小，容器高度也跟着缩，上下自然就没空白了，下面的p标签也会自动往上移
• Canvas自身用max-width/max-height配合aspect-ratio，不管屏幕怎么拉伸，都能保持320:200的比例，同时是容器里能放下的最大尺寸，绝不会溢出
• 全局样式重置避免了不同浏览器的默认边距坑

你把代码替换成这样试试，不管是拉宽还是缩窄屏幕，Canvas都能完美适配，下面的文本也会乖乖待在Canvas下面～

内容来源于stack exchange