css -如何使div具有特定的纵横比

Question

这是我当前的布局。

​

​

这就是我想做的：

​

1.外容器的宽高比应在纵横比以上

2.内容区域应具有相同的纵横比

App.js (我使用的是Bootstrap，所以现在不涉及css文件)

      <div class="border p-3 m-2 bg-info" style={{ width: "400px" }}>
        <div class="p-2 bg-light">
          <div class="border p-1 border-warning" style={{ height: "100%" }}>
            <div
              class="card text-center d-flex flex-column justify-content-between bg-light border border-warning"
              style={{ height: "100%" }}
            >
              <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>

CodeSandbox：

https://codesandbox.io/s/condescending-monad-50lwd?file=/src/App.js

Answer 1

从<div clas="card-footer">中删除p-4，然后在.card-body类中添加aspect-ratio: 16 / 9;