Reservar espai abans que carregui una imatge ja no depèn només dels atributs width i height. La propietat CSS aspect-ratio fixa la proporció del contenidor —per exemple 16/9 o 4/3— i ajuda que targetes, vídeos incrustats i heroes mantinguin la mateixa forma en mòbil i escriptori sense salts que empentin el botó de contacte fora de la pantalla.
A l'octubre de 2026, si ja has aplicat width i height, object-fit i object-position i vigiles el CLS, aspect-ratio és el complement que unifica contenidors quan el CMS serveix fotos de mides diferents.
Què és aspect-ratio (i quin problema resol en una web d'empresa)
aspect-ratio defineix la relació amplada/alçada preferida d'una caixa. El navegador calcula una dimensió quan coneix l'altra: si l'amplada és 100% de la graella i poses aspect-ratio: 16 / 9;, l'alçada es deriva sola. Això redueix buits, evita que el layout «respire» quan entra cada JPEG i millora la percepció de qualitat en llistats de notícies, casos d'èxit o catàleg.
No substitue optimitzar el pes amb WebP o AVIF ni triar el fitxer correcte amb srcset i sizes. Sí evita que el disseny sembli inestable mentre aquestes imatges arriben, sobretot en xarxes mòbils lentes.
Sintaxi pràctica en projectes reals
- Fracció clara:
aspect-ratio: 16 / 9;— Heroes, vídeos i banners. - Quadrat:
aspect-ratio: 1 / 1;— Avatars d'equip, icones de categoria. - Retrat:
aspect-ratio: 3 / 4;— Fotos verticals en mòbil sense alçada fixa en px. - Amb max-width:
width: 100%; max-width: 640px; aspect-ratio: 4 / 3;per caixes fluides amb límit.
Combinar aspect-ratio amb img i object-fit
.card-media {
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 12px;
}
.card-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}El contenidor reserva la proporció; la imatge omple el marc sense deformar-se gràcies a object-fit: cover. Per logotips o diagrames, usa object-fit: contain amb fons neutre.
aspect-ratio front a width i height en HTML
Els atributs HTML width i height segueixen sent la base per calcular l'espai intrínsec abans del CSS. aspect-ratio en CSS afegeix flexibilitat quan el contenidor canvia d'amplada entre breakpoints responsive. Bona pràctica: mantén width/height al <img> i reforça el wrapper amb aspect-ratio.
Casos d'ús en webs corporatives
Llistats de notícies i recursos
Totes les miniatures amb la mateixa proporció transmeten ordre i faciliten escanejar titulars.
Vídeos de YouTube o Vimeo incrustats
Els iframes sense alçada reservada són una font clàssica de CLS. Un wrapper aspect-ratio: 16 / 9; evita el salt quan carrega el reproductor.
Lazy loading
Amb lazy loading, el contenidor amb ratio ja mostra on apareixerà la imatge; el visitant no veu el text saltar quan el JPEG entra al viewport.
Errors freqüents
- Ratio diferent del fitxer real — Alinea ratio amb el tipus de contingut o ajusta
object-position. - Padding al mateix element — Wrapper exterior per el ratio i padding interior en un fill.
- Oblidar overflow: hidden — Les imatges amb
coverpoden desbordar cantonades arrodonides. - Només aspect-ratio sense amplada — Cal una amplada o graella/flex que la defineixi.
- Alçada fixa i aspect-ratio junts — Tria una estratègia per component.
Conclusió
aspect-ratio és una eina petita amb impacte visible: webs d'empresa més estables, menys fricció a la lectura i millor alineació amb mètriques d'experiència que Google ja tracta com senyals de qualitat. Combina-la amb bones imatges, formats moderns i retall amb object-fit.
Si la plantilla encara salta en carregar fotos o vídeos, revisem contenidors, CLS i flux de contingut en un diagnòstic sense compromís.
