1 · Tus medidas
Las que ya tienes, en píxeles, centímetros o lo que sea. En cuanto las escribas verás qué relación son.
3 · Escalar sin deformar
Escribe el ancho o el alto que necesitas y el otro sale con la misma relación. Tus medidas de arriba no se tocan.
Para tu hoja de estilos
aspect-ratio: 16 / 9;Aplicada al contenedor de una imagen o un vídeo, reserva el hueco antes de que carguen y evita el salto de maquetación.
¿Cómo se calcula una relación de aspecto?
01
Escribe la medida que ya tienes
El ancho y el alto de la imagen, el vídeo o el contenedor. Sirve cualquier unidad —píxeles, centímetros, pulgadas—: la relación no tiene unidades.
02
Mira la relación simplificada
Se reduce con el máximo común divisor y, si se acerca a una relación conocida, se nombra: 1366 × 768 no es un formato raro, es un 16:9 redondeado.
03
Escala sin deformar
En el tercer bloque escribes el ancho nuevo y el alto sale solo, con la misma relación. Tus medidas de partida se quedan donde estaban.
04
Copia el CSS
La regla `aspect-ratio` reserva el hueco antes de que la imagen cargue, así que la página no da el salto que penaliza el CLS.
Las relaciones que se usan de verdad
Cada una viene de una restricción física —el sensor de una cámara, el panel de una televisión, la pantalla de un móvil en la mano— y por eso siguen vivas mucho después de que el aparato que las impuso desapareciera.
| Relación | Dónde se usa | Medida típica |
|---|---|---|
| 16:9 | Vídeo, YouTube, presentaciones y casi cualquier pantalla | 1920 × 1080 |
| 9:16 | Vertical de móvil: stories, reels, shorts | 1080 × 1920 |
| 1:1 | Miniaturas, avatares y publicaciones cuadradas | 1080 × 1080 |
| 4:5 | Retrato de feed, el que más pantalla ocupa en móvil | 1080 × 1350 |
| 1.91:1 | Imagen de vista previa al compartir un enlace | 1200 × 630 |
| 4:3 | Fotografía de móvil, tabletas y proyectores antiguos | 1600 × 1200 |
| 3:2 | Fotografía réflex y sin espejo, y copias en papel | 3000 × 2000 |
| 21:9 | Monitores ultrapanorámicos y cabeceras muy anchas | 2560 × 1080 |
| 2.39:1 | Cine anamórfico, la franja negra de las películas | 2048 × 858 |
El salto que te hace perder la línea
Te ha pasado: estás leyendo en el móvil, termina de cargar una imagen que estaba más arriba y todo el texto salta hacia abajo. Pierdes el renglón. O peor: pulsas un botón que ya no está donde estaba.
Pasa porque el navegador no sabía cuánto iba a ocupar esa imagen hasta que terminó de bajarla. Si le dices la proporción por adelantado, guarda el hueco desde el primer momento y, cuando la imagen llega, no se mueve nada. Es la línea de estilos que puedes copiar aquí arriba.
Y no es solo cuestión de comodidad: Google mide ese salto en las visitas reales a tu web y lo tiene en cuenta para ordenar los resultados de búsqueda. En su jerga se llama Cumulative Layout Shift. Es de los problemas caros que más barato salen de arreglar.
Preguntas frecuentes
¿Qué es exactamente la relación de aspecto?
La proporción entre el ancho y el alto, escrita como dos números separados por dos puntos. Un 16:9 significa que por cada 16 unidades de ancho hay 9 de alto, sean píxeles, centímetros o metros: la relación no tiene unidades, y por eso una miniatura de 320 × 180 y una pantalla de cine comparten la misma.
¿Cómo se calcula a mano?
Se dividen ancho y alto por su máximo común divisor. En 1920 × 1080 ese divisor es 120, y el resultado es 16:9. Para redimensionar sin deformar, la fórmula es la otra cara de lo mismo: alto nuevo = ancho nuevo × alto original ÷ ancho original.
¿Por qué 1366 × 768 aparece como «≈ 16:9»?
Porque su relación exacta es 683:384, que da 1,7786 en vez de los 1,7778 del 16:9. Es una diferencia del 0,05 %, invisible en pantalla, que viene de fabricar paneles con medidas redondas. La herramienta lo señala con «≈» en vez de darte un par de números que no le dicen nada a nadie.
¿Qué relación uso para redes sociales?
Vertical 9:16 para stories, reels y shorts; 4:5 para el retrato del feed, que es el que más pantalla ocupa sin recortarse; 1:1 para miniaturas y avatares; y 1,91:1 —1200 × 630 píxeles— para la imagen de vista previa cuando alguien comparte un enlace. La tabla de esta página las lleva todas con su medida típica.
¿Puedo cambiar la relación de una imagen sin deformarla?
No estirándola: eso deforma caras y logotipos. Se hace recortando. Calcula aquí la medida de destino, recorta la parte que sobra en el eje largo y exporta. Si la imagen tiene que caber entera sin recortes, la alternativa es añadir márgenes del color del fondo.
¿Qué hago si el alto no me da un número entero de píxeles?
Redondearlo. Un píxel arriba o abajo no se ve, pero cambia la relación real, así que la herramienta te muestra la que queda después de redondear. Si estás maquetando y necesitas la proporción exacta, deja que la fije el CSS con `aspect-ratio` en vez de escribir medidas fijas.
¿Para qué sirve `aspect-ratio` en CSS?
Para reservar el hueco de una imagen o un vídeo antes de que carguen. Sin esa reserva el contenido de debajo salta cuando el archivo llega, y ese salto es lo que mide el Cumulative Layout Shift, una de las tres métricas de Core Web Vitals que Google usa como señal de posicionamiento.
¿Y el truco antiguo del `padding-top` en porcentaje?
Sigue funcionando y esta página te da el porcentaje calculado, pero ya solo hace falta en navegadores muy antiguos. `aspect-ratio` está disponible en todos los navegadores actuales desde 2021 y se lee mucho mejor que un contenedor con posicionamiento absoluto dentro.
Si el salto no era la imagen
Reservar el hueco quita ese salto. Cuando la web sigue yendo lenta, la causa suele estar más abajo: las tipografías, los programas de terceros que se cargan por el camino o un servidor que tarda en contestar. Eso se mide y se arregla.
Respondemos en menos de 24 horas hábilesBogotá · UTC−5