Is it possible to make the height of an element 100% of it's container width?

Question

I'd like to make an element have the same width and height so it is a perfect square. However the width is not a set value but rather defined by the viewport plus some whitespace. The whitespace is defined by some grid fr units plus some margins and paddings outside the dsired element and it's parent. So I have not found an easy way to calculate something like --size: 100vw - **whitespace**. I'd like to achieve this by using only CSS if possible.

Here's a working example:

* {
  box-sizing: border-box;
}
.example {
    display: flex;
    flex-wrap: wrap;
}
.example > div {
    background-color: teal;
    border: 4px solid blue;
    border-top: 0;
    border-bottom: 0;
}
.taller {
    flex-basis: 40%;
    height: 500px;
}
.shorter {
    flex-basis: 60%;
    height: 250px;
}
.perfectCircle {
    border: 4px solid red;
    --size: 100%;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;

    position: relative;
}
.perfectCircle > p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
p {
  flex-basis: 100%;
}

<div class="example">
    <p>The width of the teal containers should define the size of the perfect <del>square</del> circle inside</p>
    <div class="taller">
        <div class="perfectCircle">
            <p>
                This should ALWAYS be a perfect <del>square</del> circle and leave whitespace on top or bottom if needed.
            </p>
        </div>
    </div>
    <div class="shorter">
        <div class="perfectCircle">
            <p>
                This should ALWAYS be a perfect <del>square</del> circle and overflow the container if needed.
            </p>
        </div>
    </div>
</div>

Post CSS and HTML as a [mcve]. – zer00ne May 18 '22 at 17:43 — zer00ne, May 18 '22 at 17:43

score 2 · Accepted Answer · answered May 18 '22 at 18:00

There is a CSS property just for that: aspect-ratio

The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

Not compatible with Internet Explorer

article {
  width: 40%;
  margin: 1em 30%;
  padding: 0;
  background: lime;
}

section {
  width: 80%;
  margin: 10%;
  background: brown;
}

div {
  width: 100%;
  background: black;
  aspect-ratio: 1 / 1;
}

<article>
  <section>
    <div></div>
  </section>
</article>

OMG I can't believe I never found about the "aspect-ratio" property while searching for a solution. Thanks a lot this is it. — Arpad Flandorffer, May 18 '22 at 18:53

Is it possible to make the height of an element 100% of it's container width?

1 Answers1