Css Aspect Ratio

This tool generates CSS for a width:height aspect ratio using either the modern `aspect-ratio` property or the classic percentage-padding hack. It provides common ratio presets, custom width/height inputs (1-100), a live preview box, and copy-ready output. The preview adapts its rendering to the selected method so you can see exactly what each technique produces.

1. Click a Common Ratio preset (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) or enter custom Width and Height (1-100). 2. Choose a Method: Modern (`aspect-ratio`) or Padding Hack. 3. The Preview box renders the ratio using the selected technique. 4. Click Copy on the Output card to copy the generated CSS.

Modern outputs a single line: `aspect-ratio: <width> / <height>;`. Padding Hack outputs a `.container` with `position: relative; width: 100%; padding-top: <height/width*100>%;` and an absolutely positioned `.content` filling it, which is the legacy technique for environments without `aspect-ratio` support. The preview uses the same styles, capped at a 400px max width, so the visual matches the technique the CSS describes.