Calculadora de Relación de Aspecto

Qué son las relaciones de aspecto

Una relación de aspecto es la relación proporcional entre el ancho y el alto de una imagen o vídeo, expresada como dos números separados por dos puntos. 16:9 significa que por cada 16 píxeles de ancho hay 9 píxeles de alto. Las relaciones de aspecto son adimensionales — 1920×1080 y 1280×720 son ambas 16:9 porque comparten la misma proporción.

Relaciones comunes y sus usos

• 16:9 (1,78:1) — El estándar universal para vídeo panorámico: YouTube, Netflix, Vimeo, Twitch, emisiones de TV, monitores de escritorio y pantallas de portátil.
• 4:3 (1,33:1) — Estándar heredado de TV y monitores. Todavía se usa en presentaciones, algunas apps de iPad y vídeo de definición estándar.
• 1:1 — Formato cuadrado. Feed de Instagram, fotos de perfil, portadas de álbumes. Gran impacto visual, igual de ancho que de alto.
• 9:16 (0,56:1) — Vídeo vertical para TikTok, Instagram Reels y Stories, YouTube Shorts. El formato «pantalla completa en móvil».
• 4:5 (0,8:1) — Publicaciones verticales en el feed de Instagram. Más alto que cuadrado, muestra más contenido sin llegar a ser completamente vertical.
• 21:9 (2,33:1) — Ultrapanorámico cinematográfico. Usado en cine (formato scope 2,39:1) y monitores ultrawide.
• 3:2 (1,5:1) — Película fotográfica de 35 mm tradicional y muchas cámaras digitales. Proporciones estándar de foto en papel.

Cómo mantener la relación de aspecto al redimensionar

Para escalar una imagen conservando su relación, multiplica ambas dimensiones por el mismo factor de escala. Para encontrar el alto proporcional de un nuevo ancho: nuevo alto = (nuevo ancho / ancho original) × alto original.

Ejemplo: escalar 1920×1080 a una versión de 1280 píxeles de ancho: 1080 × (1280 / 1920) = 1080 × 0,667 = 720 píxeles. El resultado, 1280×720, mantiene la relación 16:9.

Propiedad CSS aspect-ratio

La propiedad CSS aspect-ratio (compatible con todos los navegadores modernos desde 2021) te permite declarar la relación deseada de un elemento sin conocer ambas dimensiones. Establecer aspect-ratio: 16 / 9 en un contenedor y darle solo un width hace que el navegador calcule automáticamente el alto correcto. Esto sustituye a las técnicas anteriores con el truco del padding en porcentaje.

Preguntas frecuentes

• ¿Qué es una relación de aspecto?
  Una relación de aspecto describe la relación proporcional entre el ancho y el alto de una imagen o vídeo, expresada como dos números (ej. 16:9). Una relación 16:9 significa que el ancho es 16 unidades por cada 9 unidades de alto.
• ¿Cuál es la relación de aspecto estándar de los vídeos de YouTube?
  La relación estándar de YouTube es 16:9. Resolución recomendada: 1920×1080 (Full HD). Las miniaturas deben ser de al menos 1280×720 o, preferiblemente, 1920×1080.
• ¿Qué relación de aspecto usa Instagram?
  Instagram admite 1:1 (cuadrado, 1080×1080), 4:5 (feed vertical, 1080×1350) y 9:16 (Stories/Reels, 1080×1920).
• ¿Cómo mantengo la relación de aspecto al redimensionar?
  Nuevo alto = (nuevo ancho / ancho original) × alto original. En CSS, usa aspect-ratio: 16 / 9 y establece solo una dimensión — el navegador calcula la otra automáticamente.
• ¿Cuántos píxeles tiene 16:9?
  Resoluciones 16:9 comunes: 1280×720 (HD), 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD), 7680×4320 (8K UHD). Cualquier dimensión donde ancho ÷ alto = 1,778 es 16:9.
• ¿Para qué sirve la propiedad CSS aspect-ratio?
  La propiedad CSS aspect-ratio declara la relación preferida de un elemento. Establecer aspect-ratio: 16 / 9 y solo un ancho hace que el navegador calcule el alto automáticamente. Compatible con todos los navegadores modernos desde 2021.