What is the CSS aspect-ratio property?

The aspect-ratio property maintains a specific width-to-height ratio for an element regardless of its actual dimensions, preventing layout shift. aspect-ratio: 16 / 9 keeps an element in 16:9 proportions. Before this property existed, developers used the "padding-top hack" (padding-top: 56.25%) to create aspect-ratio boxes. aspect-ratio: 1 / 1 creates perfect squares, useful for avatars and thumbnail grids. If both width and height are set, aspect-ratio is ignored. If only one dimension is set, the other is calculated from the ratio. It works with intrinsic ratios from replaced content — the aspect-ratio overrides only when the content does not have its own ratio.