Qué es la relación de aspecto
Es la proporción entre el ancho y el alto de una imagen, escrita como ancho:alto. Una imagen de 1920 × 1080
y otra de 1280 × 720 tienen tamaños distintos pero la misma relación, 16:9: la segunda es la primera reducida. Por eso
la proporción es lo que importa al diseñar un hueco, y el tamaño en píxeles es lo que importa al exportar.
Cómo se calcula
Para sacar el alto: alto = ancho × alto de la proporción ÷ ancho de la proporción. Con 1280 de ancho y 16:9, 1280 × 9 ÷ 16 = 720. Para el ancho, al revés: ancho = alto × 16 ÷ 9. Y para saber la proporción de un tamaño se dividen ancho y alto por su máximo común divisor: 1920 y 1080 entre 120 dan 16 y 9.
No todos los tamaños dan una proporción «redonda». 1366 × 768, la resolución de muchos portátiles, es 683:384, que en la práctica se trata como 16:9.
Imágenes con proporción en ximg.es
El generador acepta la proporción directamente en la URL: /1280x16:9 devuelve una
imagen de 1280 × 720, y /16:9x720 calcula el ancho a partir del alto. Si el resultado no es entero, se
trunca: /600x16:9 da 600 × 337, no 600 × 338.
<img src="https://ximg.es/1280x16:9" width="1280" height="720" alt="">
<img src="https://ximg.es/1080x4:5/e2e8f0/475569.webp" width="1080" height="1350" alt="">aspect-ratio en CSS
La propiedad aspect-ratio reserva el espacio de una imagen o un vídeo antes de que cargue, y evita que la
página salte. Con object-fit: cover, cualquier imagen se recorta para encajar en la proporción:
.miniatura {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}Si pones width y height en la etiqueta <img>, el navegador ya calcula esa proporción por su cuenta.