2

This is my current layout.

enter image description here

This is what I want to make:
enter image description here

1.the width and height of the outer container should have above aspect ratio
2.the content area should have same aspect ratio

App.js (I am using Bootstrap so no css file is involved for now)

      <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

CCCC
  • 5,665
  • 4
  • 41
  • 88
  • Does this answer your question? [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Nano Miratus Sep 20 '21 at 10:04

1 Answers1

0

Remove p-4 from <div clas="card-footer">, then add aspect-ratio: 16 / 9; in class .card-body

Hossein Azizdokht
  • 748
  • 3
  • 17