Calculadora de relación de aspecto (preserva ratio)
Define una relación objetivo y una dimensión; la otra se autocompleta. La dirección inversa funciona igual. Útil para vídeo, recorte de fotos y layout web responsivo.
- Relación de aspecto
- 16:9
- Decimal
- 1,7778
- Dimensiones
- 1920 × 1080
Cómo funciona
Qué es la relación de aspecto
La relación de aspecto describe el ancho relativo al alto: 16:9 significa 16 unidades de ancho por cada 9 de alto. La misma relación funciona a cualquier tamaño — 1920×1080 y 800×450 son ambos 16:9. Preservarla al redimensionar evita imágenes estiradas o aplastadas y es la base del diseño responsivo.
Aceptamos números enteros (16:9) o decimales (1.78:1) para la relación, y cualquier tamaño para ancho/alto. Edita cualquier campo — los demás se actualizan para mantener la relación. La relación decimal (ancho / alto) se muestra para usar en expresiones CSS calc() o herramientas de edición de vídeo.
Ratios comunes y dónde se usan
16:9 — HDTV moderna, monitores, YouTube, la mayoría de películas desde 2009. El default para casi todo lo que hagas hoy.
9:16 — vídeo vertical para Instagram Stories, TikTok, YouTube Shorts. La cara opuesta de 16:9 para contenido orientado a móvil.
1:1 — cuadrado. Default del feed de Instagram hasta 2021. Carátulas de álbum, fotos de perfil.
4:3 — TVs y monitores antes de HD. Aún se usa para cierto contenido estilo clásico.
3:2 — default de cámara DSLR. Película de 35mm. Impresiones más grandes.
21:9 — ultrawide cinematográfico. Películas filmadas anamórficamente. Algunos monitores PC y TVs LG.
Por qué importa CSS aspect-ratio
El CSS moderno tiene aspect-ratio: 16/9; — define la relación y deja que el navegador calcule el alto desde el ancho (o viceversa). Evita el viejo hack de padding-bottom y es esencial para embebes responsivos y placeholders de imagen para prevenir layout shift.
El Cumulative Layout Shift (CLS) es un Core Web Vital. Vídeos embebidos, imágenes sin dimensiones y anuncios pueden causar CLS — arregla con ancho/alto explícitos (que el navegador usa para calcular la relación) o con CSS aspect-ratio.
Preguntas frecuentes
›¿Diferencia entre 16:9 y 1.78:1?
Misma relación, distinta notación. 16/9 = 1.778. La forma con dos puntos es convencional en TV/web; la decimal en cine.
›¿Cómo preservo aspect ratio en CSS?
Usa la propiedad aspect-ratio: img { aspect-ratio: 16/9; width: 100%; height: auto; }. La imagen llena el ancho del contenedor y el alto se ajusta para preservar la relación.
›¿Por qué mi vídeo se ve mal en una TV 4:3?
La mayoría de vídeos modernos son 16:9. En una pantalla 4:3, hacen letterbox (barras negras), pillar-box o se estiran. La configuración del TV controla cuál.
›¿Puedo usar relaciones no enteras?
Sí — escribe 1.5 o 2.39. La calculadora las trata como decimales; la salida de relación simplificada solo aparece para relaciones enteras.
›¿Qué es 'pixel aspect ratio'?
Un concepto separado: la forma de un píxel individual. Las pantallas modernas usan píxeles cuadrados (1:1). Algunos formatos legacy de SD usaban píxeles no cuadrados (p.ej. 1.0667 para NTSC widescreen). Esta calculadora maneja display aspect ratio, no pixel aspect ratio.
›¿Qué es el look 'cinematográfico'?
21:9 (más exacto 2.39:1 o 2.40:1) — más ancho que HDTV. Común en blockbusters modernos. Servicios de streaming a menudo sirven películas en este ratio.
›¿Por qué Instagram Reel/TikTok usa 9:16?
Porque los teléfonos típicamente se sostienen verticalmente. 9:16 llena toda la pantalla del teléfono con contenido; 16:9 deja bandas arriba y abajo en un teléfono vertical.
›¿Los datos salen del navegador?
No. El cálculo corre localmente.
Herramientas relacionadas
Última actualización: