Chart.js如何设置图表最小高度同时维持固定宽高比？

原有padding-top比例占位方案没有配置定位规则，导致比例占位未生效，以下是两种可行实现：

方案1：CSS aspect-ratio 实现（推荐，现代浏览器兼容） #

<div
  style={{
    width: "100%",
    aspectRatio: "3/1", // 对应3:1的宽高比，可按需调整
    minHeight: 300,
  }}
>
  <Bar
    style={{ width: "100%", height: "100%" }}
    // data={你的图表数据}
    options={{
      maintainAspectRatio: false, // 必须关闭Chart.js自带的比例维护
      // 其他图表配置项
    }}
  />
</div>

aspect-ratio属性直接声明容器宽高比，浏览器会自动根据宽度计算高度，当计算出的高度小于300px时，会优先取minHeight的值，不会继续缩小。
兼容范围：Chrome 88+、Firefox 89+、Safari 15.4+，不需要兼容老旧浏览器时优先用这个方案，代码更简洁易维护。

方案2：padding-top 占位实现（全版本兼容） #

<div
  style={{
    position: "relative",
    width: "100%",
    minHeight: 300,
    paddingTop: "33.3333%", // 3:1宽高比对应值，宽高比计算方式为 `100/(宽/高) %`
  }}
>
  <Bar
    style={{
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
    }}
    // data={你的图表数据}
    options={{
      maintainAspectRatio: false, // 必须关闭Chart.js自带的比例维护
      // 其他图表配置项
    }}
  />
</div>

通过padding-top百分比（相对于容器宽度计算）占位实现固定比例，子元素绝对定位撑满父容器，同样会优先遵循minHeight规则，兼容所有支持CSS2的浏览器。

核心注意点 #

• maintainAspectRatio: false 是必填配置，关闭Chart.js内置的宽高比控制后，图表才会完全自适应外层容器的尺寸
• 宽高比可按需调整：比如需要16:9的比例，方案1设置aspectRatio: "16/9"，方案2设置paddingTop: "56.25%"即可

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