# Relación de aspecto explicada: 1:1, 4:5, 9:16, 16:9 y más

[Canonical HTML page](https://gradiently.design/es/guide/aspect-ratios-explained)

Los tamaños en píxeles cambian de una plataforma a otra, pero solo hay un puñado de formas. Aprende esas formas y las matemáticas que las unen, y no volverás a deformar un diseño.

## The short version

- La relación de aspecto es la relación proporcional entre el ancho y el alto de una imagen, y se escribe como ancho:alto.
- Para hallar la relación de aspecto de cualquier tamaño, divide ambos números entre su máximo común divisor, de modo que 1920×1080 se convierte en 16:9.
- Para obtener un tamaño nuevo con la misma relación de aspecto, multiplica el ancho nuevo por el alto de la relación y divide entre su ancho.
- Las relaciones que más importan en redes sociales son 1:1, 4:5, 9:16, 16:9 y 1,91:1.
- Cambiar una imagen a otra relación de aspecto siempre implica recortar, añadir espacio o recomponer el diseño; estirarla la deforma.

La **relación de aspecto** es la forma de una imagen: su ancho comparado con su alto, escrita con dos números como 16:9. Un vídeo de 1920×1080 y una miniatura de 1280×720 tienen tamaños distintos pero la misma relación de aspecto 16:9, así que uno se escala al otro sin recortes. La mayoría de los problemas de diseño con «el tamaño equivocado» son en realidad problemas de forma equivocada.

## Las relaciones de aspecto comunes y dónde se usan

- 1:1 cuadrado: 1080 × 1080
- 4:5 vertical: 1080 × 1350
- 2:3 pin: 1000 × 1500
- 9:16 vertical: 1080 × 1920
- 4:3 clásico: 1600 × 1200
- 16:9 panorámico: 1920 × 1080
- 1,91:1 tarjeta de enlace: 1200 × 630
- 3:1 cabecera: 1500 × 500

Ocho formas cubren casi todo lo que diseñarás. Dibujadas a escala, del cuadrado a la cabecera fina.

| Relación | Forma | Tamaño típico | Se usa para |
| --- | --- | --- | --- |
| 1:1 | Cuadrado | 1080×1080 | Cuadrado de Instagram, publicaciones de Facebook y LinkedIn, portadas de listas |
| 4:5 | Vertical | 1080×1350 | Publicaciones verticales de Instagram, Threads, Facebook y X |
| 3:4 | Vertical | 1080×1440 | Cómo recorta Instagram las publicaciones en la cuadrícula del perfil |
| 2:3 | Vertical alto | 1000×1500 | Pines de Pinterest |
| 9:16 | Vertical | 1080×1920 | Stories, Reels, TikTok, Shorts, estados de WhatsApp |
| 4:3 | Horizontal clásico | 1600×1200 | Presentaciones antiguas, shots de Dribbble, publicaciones de Google Business a 1200×900 |
| 16:9 | Panorámico | 1920×1080 | Miniaturas de YouTube, presentaciones, portadas web, publicaciones de X y Bluesky |
| 1,91:1 | Tarjeta ancha | 1200×630 | Vistas previas de enlaces e imágenes Open Graph |
| 3:1 y 4:1 | Banner | 1500×500, 1584×396 | Cabeceras de X, banners de LinkedIn |

Una relación, muchas plataformas. Cuando dos formatos comparten relación, un solo diseño sirve para ambos escalándolo.

Los tamaños exactos en píxeles de cada plataforma están en los [tamaños de imagen para redes sociales](https://gradiently.design/es/guide/social-media-image-sizes). Fíjate en lo pocas que son las formas: si sabes diseñar bien en 1:1, 4:5, 9:16 y 16:9, cubres la mayor parte de la presencia social de una marca.

## Cómo calcular una relación de aspecto

Toma el ancho y el alto y divide ambos entre el mayor número que cabe exactamente en los dos, llamado máximo común divisor. Lo que queda es la relación en su forma más simple.

1. **Empieza por el tamaño** Digamos 1080×1350, una publicación vertical de Instagram.
2. **Halla el máximo común divisor** El mayor número que divide exactamente 1080 y 1350 es 270.
3. **Divide ambos lados** 1080 ÷ 270 = 4 y 1350 ÷ 270 = 5. La relación de aspecto es 4:5.
4. **O usa un decimal** Divide el ancho entre el alto: 1080 ÷ 1350 = 0,8. Los decimales son útiles para formas incómodas como 1200×630, que es cerca de 1,91, de ahí 1,91:1.

Si prefieres no hacerlo a mano, estas pocas líneas de JavaScript hacen lo mismo en la consola de un navegador.

```js
const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

function aspectRatio(width, height) {
  const d = gcd(width, height);
  return `${width / d}:${height / d}`;
}

// Height for a new width, keeping the same shape
const heightFor = (newWidth, w, h) => Math.round((newWidth * h) / w);

aspectRatio(1920, 1080); // "16:9"
aspectRatio(1080, 1350); // "4:5"
heightFor(1280, 16, 9);  // 720
```

El algoritmo de Euclides para el divisor y luego un simple escalado. Pégalo en cualquier consola del navegador.

## Convertir tamaños sin cambiar la forma

Para escalar una imagen y mantener su relación de aspecto, usa una sola fórmula: **alto nuevo = ancho nuevo × alto de la relación ÷ ancho de la relación**. Para un marco 16:9 de 1280 píxeles de ancho, es 1280 × 9 ÷ 16 = 720. Para un marco 4:5 de 1600 píxeles de ancho, es 1600 × 5 ÷ 4 = 2000.

Hacerlo al revés es igual de sencillo: ancho nuevo = alto nuevo × ancho de la relación ÷ alto de la relación. Un vídeo 9:16 que debe medir 1280 de alto mide 1280 × 9 ÷ 16 = 720 de ancho. Si el resultado sale con decimales, redondea al píxel entero más cercano; la diferencia es invisible.

## Qué pasa cuando cambias la relación de aspecto

Escalar mantiene la forma. Cambiar la relación no, y solo tienes tres opciones honestas: recortar parte de la imagen, añadir espacio a su alrededor o reordenar el diseño para la nueva forma. La cuarta opción, estirar, deforma cada letra y cada círculo, y la gente lo nota enseguida.

### Recortar o estirar

- Rápido, pero el titular suele cortarse
- Estirar hace que el texto parezca aplastado
- Los logotipos acaban en el sitio equivocado
- Los fondos pierden su punto luminoso
- Cada formato se ve un poco raro

### Recomponer

- Las palabras se reajustan a la forma
- El texto mantiene sus proporciones reales
- El logotipo va donde lo espera cada formato
- El fondo se genera de nuevo para el marco
- Cada formato parece diseñado para su sitio

Una publicación vertical 4:5 de un estudio de cerámica que anuncia que abren las clases de primavera

El diseño en 4:5 para el feed: palabras apiladas, espacio arriba y abajo.

El mismo anuncio del estudio de cerámica compuesto en un marco panorámico 16:9

El mismo diseño en 16:9 para la portada de una web: las palabras se extienden más, el fondo se redibuja para el marco.

Esto es lo que hace el cambio de tamaño en Gradiently con Pro: eliges los tamaños que necesitas y cada copia se recompone para su forma, mientras que el Mark que hay detrás se genera de nuevo en cada relación en lugar de recortarse de una sola imagen. [Un mismo estilo, todos los tamaños](https://gradiently.design/es/guide/one-look-every-size) lo explica paso a paso.

## Qué relación de aspecto elegir para una publicación

Cuando una plataforma admite varias formas, elige la que ocupa más espacio en la pantalla de un móvil. En Instagram es 4:5, que es más alta que un cuadrado y soporta mejor el recorte de la cuadrícula del perfil; el [tamaño de las publicaciones de Instagram](https://gradiently.design/es/guide/instagram-post-size) explica por qué. En Pinterest, un pin 2:3 es el estándar; existen pines más largos, pero pueden cortarse en el feed, como se explica en el [tamaño de los pines de Pinterest](https://gradiently.design/es/guide/pinterest-pin-size).

Para todo lo que se ve en una televisión o un portátil, 16:9 es la opción segura, y por eso las [miniaturas de YouTube](https://gradiently.design/es/guide/youtube-thumbnail-size) y las presentaciones la usan. Para todo lo que se ve a pantalla completa en un móvil, 9:16 es la única forma que lo llena. Ante la duda, diseña primero las versiones vertical y panorámica: el cuadrado y el 4:5 caben cómodamente entre ellas.

## Relación de aspecto en CSS

En la web, la propiedad CSS `aspect-ratio` mantiene la forma de una caja a cualquier ancho, lo que evita que los diseños den saltos mientras cargan imágenes y vídeos. Es compatible con todos los navegadores actuales; consulta la [referencia de aspect-ratio de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).

```css
.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%);
}

.card-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover; /* crops to fill rather than stretching */
}
```

Escribe la relación con una barra. Combínala con object-fit: cover en las imágenes para que se recorten en lugar de deformarse.

Las relaciones también importan en impresión y vídeo, con sus propias convenciones. Para los formatos de vídeo consulta los [tamaños de vídeo para redes sociales](https://gradiently.design/es/guide/social-video-sizes), y para saber cómo se relacionan los píxeles con el tamaño físico, [DPI frente a PPI](https://gradiently.design/es/guide/dpi-vs-ppi).

## FAQ

### ¿Qué es una relación de aspecto?

Es la forma de una imagen, expresada como su ancho comparado con su alto, como 16:9 o 4:5. Las imágenes con la misma relación de aspecto se escalan unas a otras sin recortes.

### ¿Cómo calculo una relación de aspecto?

Divide el ancho y el alto entre su máximo común divisor. Para 1920×1080 el divisor es 120, lo que da 16:9.

### ¿Qué relación de aspecto es 1080×1350?

4:5, la forma vertical que usan las publicaciones verticales de Instagram, Threads, Facebook y X.

### ¿Cuál es la diferencia entre 16:9 y 9:16?

Es la misma forma girada de lado. 16:9 es horizontal, usada en YouTube y presentaciones; 9:16 es vertical, usada en Stories, Reels y TikTok.

### ¿Cómo cambio una relación de aspecto sin estirar?

Recorta la imagen, añade espacio a su alrededor o recompón el diseño para la nueva forma. Reordenar da el mejor resultado en diseños con texto.