CSS如何让div保持指定aspect ratio 基于Bootstrap实现内外容器等比例

你可以直接用Bootstrap自带的ratio宽高比工具类实现需求，不需要额外写独立CSS，调整后的代码如下：

<div class="border p-3 m-2 bg-info ratio" style={{ width: "400px", '--bs-aspect-ratio': '133%' }}>
  <div class="p-2 bg-light ratio" style={{ '--bs-aspect-ratio': '133%' }}>
    <div class="border p-1 border-warning ratio" style={{ '--bs-aspect-ratio': '133%' }}>
      <div
        class="card text-center d-flex flex-column justify-content-between bg-light border border-warning"
      >
        <div class="card-body" style={{ flexGrow: 2 }}></div>
        <div class="card-footer text-white p-4 border-top border-warning">
          <span class="bg-danger fs-3">123</span>
        </div>
      </div>
    </div>
  </div>
</div>

调整说明：

• 删掉了原代码中冗余的height: 100%设置，ratio类会自动让子元素填满容器空间
• 给外层容器和每一层内容容器都加了ratio类，同时通过内联CSS变量--bs-aspect-ratio设置统一的宽高比，数值为「宽/高 * 100%」，你可以根据你截图里的实际比例调整这个数值即可，示例里的133%对应的是4:3的宽高比
• 所有层级使用相同的--bs-aspect-ratio值，就能保证外层容器和内容区域保持一致的宽高比

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