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.