Les propietats CSS object-fit i object-position defineixen com una imatge omple la seva caixa quan el contenidor no té la mateixa proporció que el fitxer. En una web d'empresa, marquen la diferència entre fotos d'equip alineades, productes sense deformar i heroes que retallen el detall equivocat — o un catàleg que sembla fet amb plantilla barata.
A l'octubre de 2026, si ja domines width i height, textos alternatius i formats moderns amb WebP i AVIF, el següent pas és controlar l'enquadrament dins el marc sense Photoshop per cada breakpoint.
Què fa object-fit (i per què no n'hi ha prou amb width: 100%)
Per defecte, una <img> escala el bitmap segons l'amplada i l'alçada CSS. Si només forces width: 100% sense alçada fixa, la imatge manté la proporció — però en graelles de targetes amb alçada fixa (equip, notícies, productes), el navegador pot deformar o deixar forats si no defines el comportament.
object-fit actua quan la imatge té dimensions de caixa explícites (CSS o atributs width/height amb contenidor dimensionat). Valors habituals en webs corporatives:
- fill — Estira per omplir; evita'l en persones i producte excepte casos controlats.
- contain — Mostra la imatge sencera; pot deixar bandes. Útil en logos o diagrames.
- cover — Omple recortant l'excedent; estàndard en cards, heroes i galeries.
- none — Mida intrínseca; poc habitual en màrqueting.
- scale-down — El menor entre none i contain; a vegades en avatars petits.
En la pràctica, cover + object-position substitueix gran part dels retalls manuals al CMS per llistats homogenis.
object-position: on anclar el retall
Amb object-fit: cover, el navegador retalla per costats o per dalt/baix. object-position indica quina part ha de quedar visible — per exemple center top per retrats corporatius o 50% 30% quan el detall de maquinària no és al centre.
object-position: center;— Equilibri per defecte.object-position: top center;— Prioritza cares en fotos d'equip.object-position: right center;— Producte a la dreta en banners.
Combina-ho amb disseny responsive: la mateixa foto pot necessitar top en mòbil i center en escriptori si canvia la proporció del contenidor.
Casos d'ús en webs d'empresa
Graella d'equip i testimonis
Caixes 1:1 o 4:3 amb encuadres originals diferents. Patró recomanat:
.team-card img {
width: 100%;
height: 280px;
object-fit: cover;
object-position: top center;
}Catàleg i e-commerce B2B
Producte sobre fons blanc: contain amb padding intern sol vendre millor que un retall agressiu. Producte en ús o lifestyle: cover centrat en l'article.
Hero i banners de campanya
El hero sol usar cover en un contenidor ample i baix. Ajusta object-position perquè el text superposat no tapï el subjecte. Si el copy va a l'esquerra, prova object-position: 70% center.
Logos i partners
Millor contain amb alçada màxima que deformar amb fill. L'alt ha de nombrar la marca.
Relació amb CLS, LCP i rendiment
object-fit no substitueix reservar espai: continua sent obligatori width i height (o aspect-ratio en CSS) per evitar salts de layout. El retall és només visual; el pes descarregat és el mateix — per això srcset i compressió importen igual.
En la imatge LCP del hero, no abusis de retalls extrems; alinea object-position amb el titular i prova en mòbil real.
Errors freqüents (i com corregir-los)
- Cover sense alçada al contenidor — La imatge no retalla; sembla que object-fit «no funciona». Defineix alçada o aspect-ratio.
- background-image en lloc de img — background-size: cover és vàlid, però perds alt semàntic i lazy loading natiu.
- Mateixa posició per totes les fotos — Retrat vertical i pla general necessiten posicions diferents; usa camps al CMS.
- Oblidar el focus en mòbil — Contenidors més alts en mòbil retallen diferent; usa
@media. - Deformar amb fill «perquè és més fàcil» — Transmet descuidament; els visitants ho perceben.
Checklist abans de publicar una secció amb moltes imatges
- Totes les caixes comparteixen proporció o alçada? Si no, defineix regles per plantilla.
- Persones, producte o paisatge? Ajusta object-position per categoria.
- Hi ha text superposat? Comprova contrast i que el retall no amagui el subjecte.
- L'alt descriu el que es veu després del retall?
- Pes optimitzat amb optimització d'imatges?
Conclusió
object-fit i object-position són eines de marca: alineen catàlegs, equip i campanyes sense Photoshop a cada mida. Inverteix una hora en variables de disseny i classes reutilitzables al teu tema o CMS; el retorn és consistència visual, menys tickets de «aquesta foto es veu estranya» i més confiança — especialment en B2B.
Si vols auditar com es comporten les teves imatges en mòbil i escriptori, a aatsoft revisem plantilles, Core Web Vitals i flux editorial amb tu.
