如何用CSS让Canvas在父元素内保持宽高比并最大化显示？

修改后的CSS代码 #

.grid-container {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  background-color: white;
  gap: 1px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.grid-item {
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 0; /* 移除默认内边距，避免挤压Canvas可用空间 */
}

#canvas1 {
  aspect-ratio: 4/3;
  max-width: 100%;
  max-height: 100%;
  background-color: red;
  margin: 0;
  padding: 0;
}

补充JS代码（解决绘图拉伸问题） #

const canvas = document.getElementById('canvas1');

function resizeCanvas() {
  const displayWidth = canvas.clientWidth;
  const displayHeight = canvas.clientHeight;
  
  // 仅当显示尺寸变化时更新Canvas绘图分辨率
  if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
    canvas.width = displayWidth;
    canvas.height = displayHeight;
    // 此处可添加你的重绘逻辑，比如重新渲染Canvas内容
  }
}

// 初始化执行一次
resizeCanvas();
// 监听窗口尺寸变化
window.addEventListener('resize', resizeCanvas);

关键说明 #

1. 尺寸控制逻辑：用max-width:100%和max-height:100%替代直接设置width/height:100%，这样aspect-ratio:4/3会生效——Canvas会在不超出父容器的前提下，自动最大化并保持宽高比。
2. 父容器调整：给.grid-item添加padding:0，消除默认内边距对Canvas可用空间的限制。
3. Canvas绘图分辨率同步：CSS设置的是Canvas的显示尺寸，而Canvas的width和height属性是内部绘图分辨率，必须与显示尺寸同步，否则绘制内容会出现拉伸变形。通过监听窗口resize事件动态更新这两个属性即可解决。
4. 关于object-fit：该属性作用于Canvas的内部绘制内容，而非Canvas本身在父容器中的适配，因此此处不需要使用。

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