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

Issue

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>

Solution

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>

Answered By – Arleigh Hix

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.