Maintaining Div Aspect Ratio Based on Height

Maintaining the width of an element as a percentage of its height can be challenging. While using a percentage value for padding-top can achieve the opposite effect, padding-left as a percentage relies on the object's width, not its height.

To address this issue, CSS introduces the aspect-ratio property, providing an elegant solution to maintain a consistent aspect ratio based on height. The following code snippet demonstrates its usage:

.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}

In this example, the .box element has a fluid height of 50% and an aspect ratio of 2:1. When the container's height changes, the box's height and width adjust accordingly, preserving its aspect ratio.

The aspect-ratio property ensures that the box's width remains proportional to its height, regardless of the text content or the container's size. This eliminates the need for complex JavaScript solutions and provides a clean and efficient CSS-only approach to maintaining aspect ratios.