Relación de aspecto de CSS

Esta herramienta genera CSS para una relación anchura:altura usando la propiedad moderna `aspect-ratio` o el truco clásico del padding porcentual. Ofrece presets de relaciones comunes, entradas personalizadas de anchura/altura (1-100), un cuadro de vista previa en vivo y una salida lista para copiar. La vista previa adapta su renderizado al método seleccionado para que veas exactamente lo que produce cada técnica.

1. Haz clic en un preset de Common Ratio (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) o introduce Width y Height personalizados (1-100). 2. Elige un Method: Modern (`aspect-ratio`) o Padding Hack. 3. El cuadro Preview renderiza la relación usando la técnica seleccionada. 4. Haz clic en Copy en la tarjeta Output para copiar el CSS generado.

Modern genera una sola línea: `aspect-ratio: <width> / <height>;`. Padding Hack genera un `.container` con `position: relative; width: 100%; padding-top: <height/width*100>%;` y un `.content` con posición absoluta que lo rellena, que es la técnica heredada para entornos sin soporte de `aspect-ratio`. La vista previa usa los mismos estilos, limitados a un ancho máximo de 400px, por lo que el resultado visual coincide con la técnica que describe el CSS.