如何用CSS让大尺寸HTML5 Canvas适配窗口且不修改画布尺寸

你需要通过CSS控制Canvas的显示尺寸，保留JavaScript设置的绘图缓冲区尺寸（即canvas.width和canvas.height），这样既不会改变绘图的高分辨率属性，又能让Canvas像大图片一样适配窗口。

核心CSS代码 #

#c {
  /* 限制显示尺寸不超出视口范围 */
  max-width: 100vw;
  max-height: 100vh;
  /* 保持原始宽高比，避免拉伸变形 */
  object-fit: contain;
  /* 消除inline元素默认间隙，可选水平居中 */
  display: block;
  margin: 0 auto;
}

代码说明 #

• max-width: 100vw/max-height: 100vh：确保Canvas显示时不会超出当前窗口的可视范围，避免出现滚动条。
• object-fit: contain：这是关键规则，会自动按Canvas的原始宽高比计算显示尺寸，保证整个画布内容完整显示且不被拉伸扭曲。
• display: block+margin: 0 auto：清除Canvas作为inline元素的默认间距，并让它在窗口水平居中（可根据需求调整）。

补充提示 #

不需要修改JavaScript中设置的canvas.width和canvas.height值，浏览器会自动根据CSS规则适配显示尺寸。如果窗口大小变化，CSS会实时重新计算显示比例，无需额外编写resize事件逻辑（特殊场景除外）。

内容的提问来源于stack exchange，提问作者Erlend