Calculadora de Relación de Aspecto — Dimensiones Responsive
Calcula dimensiones faltantes desde relaciones de aspecto con nuestra Calculadora de Relación de Aspecto. Genera código CSS para medios responsivos con la propiedad moderna aspect-ratio o técnica legacy padding-bottom. Perfecto para imágenes responsivas, embeds de video y diseño de layouts con presets comunes como 16:9, 4:3, 21:9 y más.
Características
- Calcular ancho o alto faltante desde relación de aspecto
- Plantillas de relaciones comunes (16:9, 4:3, 21:9, 1:1, etc.)
- Generador del truco CSS padding-bottom
- Múltiples formatos de relación (relación, decimal, porcentaje)
- Calculadora de tamaños de imagen responsivos
- Cálculo en tiempo real
- Procesamiento 100% del lado del cliente
Relaciones de Aspecto Comunes
- 16:9 — Video HD estándar, YouTube, pantallas modernas
- 4:3 — TV clásica, monitores antiguos
- 21:9 — Monitores ultraanchos, cinematográfico
- 1:1 — Cuadrado (publicaciones de Instagram)
- 9:16 — Video vertical (Instagram Stories, TikTok)
Casos de Uso Comunes
- Imágenes Responsivas: Mantener relación de aspecto al escalar imágenes
- Incrustaciones de Video: Calcular dimensiones de iframe para YouTube, Vimeo
- Relación de Aspecto CSS: Generar truco padding-bottom para navegadores antiguos
- Redimensionamiento de Imagen: Calcular dimensiones de recorte o redimensionamiento
- Diseño de Layout: Planificar layouts de cuadrícula responsivos
Técnicas CSS de Relación de Aspecto
Enfoque moderno (CSS aspect-ratio):
.container { aspect-ratio: 16 / 9; width: 100%;
}Enfoque legacy (truco padding-bottom):
.container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 = 9/16 = 56.25% */
}
.container > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}Recursos Útiles
Wikipedia: Relación de Aspecto Introducción amigable para principiantes sobre relaciones de aspecto en imágenes y video
MDN: Propiedad CSS aspect-ratio Propiedad CSS moderna para mantener relaciones de aspecto
Smashing Magazine: Aspect Ratio en CSS Guía completa para mantener relaciones de aspecto en CSS moderno
W3C CSS Box Sizing Module Especificación oficial para CSS aspect-ratio
Nueva Propiedad CSS Aspect-Ratio Guía de Google web.dev sobre manejo moderno de relación de aspecto