<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
.box {
  --default-size: var(--size, 100px);
  
  width: var(--default-size);
  height: calc( var(--default-size) / var(--aspect-ratio, 1) );
  
  background: red;
  margin-bottom: 1em;
}

.box-2 {
  --size: 150px;
  --aspect-ratio: calc(4 / 3);
}

.box-3 {
  --size: 250px;
  --aspect-ratio: calc(16 / 9);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.