Calculadora de Relación de Aspecto CSS & Conversor de Hack de Padding Responsivo
Calcule el aspect-ratio moderno y los hacks heredados de porcentaje padding-top con caja de vista previa responsiva en tiempo real
Una herramienta útil para mantener relaciones de aspecto consistentes de ancho a alto para imágenes, reproductores de video y contenedores iframe utilizando reglas CSS modernas o hacks de porcentaje heredados.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Escriba las dimensiones en píxeles (Ancho/Alto) o seleccione ajustes preestablecidos de resolución estándar (16:9, 4:3, etc.).
- Observe la relación entera simplificada y el equivalente de porcentaje de padding-top calculado.
- Use el control deslizante de ancho para verificar visualmente la capacidad de respuesta y copie las reglas CSS deseadas.
Preguntas frecuentes
- ¿Qué es el hack de relación de aspecto de padding-top?
- Aprovecha la especificación CSS de que el relleno porcentual se calcula en función del ancho del elemento padre. Combinar una altura cero con padding-top establece una relación de diseño responsiva.
- ¿Funciona aspect-ratio en Internet Explorer?
- No. IE 11 y anteriores no admiten aspect-ratio de CSS. Para una máxima compatibilidad con navegadores antiguos, se debe utilizar el hack de padding-top.
- Cuando pongo una imagen dentro del código generado, se ve estirada y desproporcionada, ¿por qué?
- La propiedad aspect-ratio (o el truco de padding-top) solo fija la proporción del propio contenedor. Para que una imagen dentro se ajuste a esa proporción sin deformarse, también debes aplicar object-fit: cover (o contain) al elemento de la imagen.