Aspect Ratio
Calcula y mantiene relaciones de aspecto para imágenes, vídeos y pantallas.
① Introduce ancho y alto ② O selecciona un preset ③ Copia el CSS
Estándar
Social
Relación personalizada:
16:9
Relación de aspecto
16:9
Dimensiones
1920×1080
Relación decimal
1.7778
Salida CSS
aspect-ratio: 16 / 9; padding-top: 56.2500%; /* legacy fallback */ width: 1920px; height: 1080px;
Continuar con
¿Qué es la relación de aspecto y por qué importa?
La relación de aspecto es la relación proporcional entre el ancho y la altura de un elemento, expresada como A:H — por ejemplo 16:9, 4:3, 1:1 o 9:16. Es fundamental para producción de vídeo, fotografía y diseño web responsivo. El CSS moderno aplica ratios con la propiedad aspect-ratio (ej. aspect-ratio: 16 / 9), sustituyendo el antiguo truco padding-top (padding-top: 56.25%). Casos de uso: miniaturas YouTube (1280×720, 16:9), posts Instagram (1080×1080, 1:1), TikTok y Stories (1080×1920, 9:16), imágenes Open Graph (1200×630), banners LinkedIn (1200×627).
Preguntas frecuentes
La relación de aspecto es la relación proporcional entre ancho y altura, expresada como A:H. Las relaciones comunes: 16:9, 4:3, 1:1, 21:9, 9:16.
Altura = ancho × (alto relación ÷ ancho relación). Ejemplo: 16:9 a 1920px → 1080px.
16:9 es el estándar para vídeo widescreen, monitores modernos y miniaturas de YouTube.
CSS moderno: `aspect-ratio: 16 / 9`. Navegadores antiguos: `padding-top: 56.25%`.
La relación es adimensional (ej. 16:9). La resolución es el conteo real de píxeles (1920×1080).
En HTML5, usa width y height en <img>. Añade max-width: 100%; height: auto en CSS.
Post Instagram: 1:1. Story/TikTok: 9:16. Twitter: 3:1. YouTube: 16:9 (1280×720). Open Graph: 1200×630.