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.

Conversor px a rem Convierte píxeles a unidades rem, em y porcentaje para diseño responsive. Calculadora CSS con tamaño de fuente base personalizable y tabla de conversión.
Conversor de Datos Convierte datos entre JSON, CSV, XML, YAML y Unix timestamps. Conversor de formatos con configuración personalizable y mensajes de error claros.
Generador de Hash SRI Genera hashes Subresource Integrity (SRI) para recursos CDN. SHA-256, SHA-384, SHA-512 con etiquetas script y link listas para usar.
Codificador Base64 Codificador y decodificador Base64 para texto y archivos con soporte de arrastrar y soltar. Codificación URL-safe y vista previa en tiempo real para desarrollo.

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