Aspect Ratio Box

v1.0.0

Generate CSS aspect-ratio containers with fallback padding-hack

Generates CSS code for maintaining fixed aspect ratios on responsive containers using the modern aspect-ratio property or the classic padding-bottom percentage trick.

How to use

→Click a preset button to select a common aspect ratio like 16:9 or 4:3.
→Enter custom width and height values for any ratio.
→Copy the modern CSS for evergreen browsers or the legacy fallback for older support.
→The live preview updates instantly as you adjust dimensions.

Presets

Width

Height

Padding: 56.25%

Preview

16:9

Modern CSS (aspect-ratio)

.aspect-box {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Legacy Fallback (padding-bottom)

.aspect-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
}

.aspect-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}