如何让Canvas填充可伸缩Flex容器并保持2/3宽高比不被裁切？

要让Canvas在Flex容器中保持2/3宽高比、填充可用空间且不被裁切，只需修改Canvas的CSS样式，利用aspect-ratio强制宽高比，结合max-width和max-height限制尺寸范围，再通过object-fit: contain确保内容不拉伸裁切：

canvas {
  /* 强制保持2/3的宽高比（对应canvas原生属性的200宽、300高） */
  aspect-ratio: 2/3;
  /* 最大尺寸不超出容器减去边距的可用空间 */
  max-width: calc(100% - 2rem);
  max-height: calc(100% - 2rem);
  /* 确保Canvas内容按比例完整显示，不裁切 */
  object-fit: contain;
  background: green;
}

可选优化：给Canvas容器添加box-sizing: border-box，确保后续若添加内边距时尺寸计算更准确：

#canvasContainer {
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

原理说明 #

• aspect-ratio: 2/3：强制Canvas元素与原生分辨率（200x300）保持一致的宽高比，避免拉伸变形。
• max-width/max-height：限制Canvas的最大尺寸不超出容器的可用范围，防止元素溢出容器。
• object-fit: contain：保证Canvas绘制的内容按比例缩放，完整显示在元素内部，不会出现裁切或拉伸问题。

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