I would like to set div width relative to its height

Question

Is there any way to set the width of a div relative to its own height?

i.e.

.classname {
    width: 40%;
    height: calc(width * 0.67);
}

Answer 1

This answer details many ways on how to maintain the aspect ratio of an HTML element. A simple, modern solution uses the CSS aspect-ratio property:

div.relative-width {
  height: 200px;
  background: gold;
  
  /*  set width to always be half of height */
  aspect-ratio: 1 / 2;
}

<div class="relative-width">
  <p>This div is 200px high, and the width should be half of that: 100px</p>
</div>