Las propiedades CSS object-fit y object-position deciden cómo una imagen llena su caja cuando el contenedor no tiene la misma proporción que el archivo. En una web de empresa, son la diferencia entre fotos de equipo alineadas, productos sin deformar y heroes que recortan el mensaje equivocado — o un catálogo que parece hecho con plantilla barata.
En octubre de 2026, si ya dominas width y height, textos alternativos y formatos modernos con WebP y AVIF, el siguiente paso es controlar el encuadre dentro del marco sin tocar Photoshop para cada breakpoint.
Qué hace object-fit (y por qué no basta con width: 100%)
Por defecto, una <img> estira o encoge su bitmap para ocupar el ancho y alto del CSS. Si fuerzas solo width: 100% sin altura fija, la imagen conserva su ratio — pero en rejillas de tarjetas con altura fija (equipo, noticias, productos) el navegador deforma o deja huecos si no defines comportamiento.
object-fit actúa cuando la imagen tiene dimensiones de caja explícitas (por CSS o por atributos width/height combinados con un contenedor). Valores que verás en webs corporativas:
- fill — Estira para llenar; evítalo en fotos de personas y producto salvo casos muy controlados.
- contain — Muestra la imagen entera dentro de la caja; puede dejar bandas (letterboxing). Útil en logos o diagramas en cajas variables.
- cover — Llena la caja recortando lo que sobresale; el estándar en cards, heroes y galerías.
- none — Tamaño intrínseco; raro en marketing, útil en previews técnicos.
- scale-down — Como el menor entre none y contain; a veces en avatares pequeños.
En la práctica, cover + object-position sustituye gran parte de los recortes manuales en CMS para listados homogéneos.
object-position: dónde anclar el recorte
Con object-fit: cover, el navegador recorta por los lados o por arriba/abajo. object-position indica qué parte de la foto debe permanecer visible — por ejemplo center top para retratos corporativos (cara visible) o 50% 30% para maquinaria donde el detalle está ligeramente descentrado.
Sintaxis habitual:
object-position: center;— Equilibrio por defecto.object-position: top center;— Prioriza cabezas en fotos de equipo.object-position: right center;— Producto a la derecha del encuadre en banners.
Combínalo con diseño responsive: la misma foto puede necesitar top en móvil y center en escritorio si cambias la proporción del contenedor entre breakpoints.
Casos de uso en webs de empresa
Grid de equipo y testimonios
Cajas 1:1 o 4:3 con fotos de distintos encuadres originales. Patrón recomendado:
.team-card img {
width: 100%;
height: 280px;
object-fit: cover;
object-position: top center;
}Así evitas cabezas cortadas y mantienes ritmo visual en la página «Quiénes somos».
Catálogo y e-commerce B2B
Producto sobre fondo blanco: contain con padding interno suele vender mejor que un recorte agresivo. Producto en uso o lifestyle: cover con posición centrada en el artículo.
Hero y banners de campaña
El hero suele usar cover en un contenedor ancho y bajo. Ajusta object-position para que el texto superpuesto no tape el sujeto principal. Si el copy va a la izquierda, prueba object-position: 70% center para desplazar el foco visual.
Logos y partners
Mejor contain con altura máxima que deformar con fill. Para accesibilidad, el alt debe nombrar la marca, no «logo».
Relación con CLS, LCP y rendimiento
object-fit no sustituye reservar espacio: sigue siendo obligatorio width y height (o aspect-ratio en CSS) para evitar saltos de layout. El recorte es solo visual; el archivo descargado sigue siendo el mismo peso — por eso srcset y compresión importan igual.
En la imagen LCP del hero, no abuses de recortes extremos que oculten el mensaje; alinea object-position con el titular y prueba en móvil real, no solo en el inspector.
Errores frecuentes (y cómo corregirlos)
- Cover sin altura en el contenedor — La imagen no recorta; parece que object-fit «no funciona». Define altura o aspect-ratio en el contenedor.
- background-image en lugar de img — background-size: cover es válido, pero pierdes alt semántico y lazy loading nativo; reserva HTML para contenido importante.
- Misma posición para todas las fotos — Un retrato vertical y un plano amplio necesitan posiciones distintas; usa clases por tipo o campos en el CMS.
- Olvidar el foco en móvil — Contenedores más altos en móvil recortan distinto; prueba
@mediacon otra object-position. - Deformar con fill «porque es más fácil» — Da sensación de web descuidada; los visitantes lo perciben aunque no sepan el término CSS.
Checklist antes de publicar una sección con muchas imágenes
- ¿Todas las cajas comparten proporción o altura? Si no, define reglas por plantilla.
- ¿Personas, producto o paisaje? Ajusta object-position por categoría.
- ¿Hay texto superpuesto? Comprueba contraste y que el recorte no oculte el sujeto.
- ¿Atributos alt describen lo visible tras el recorte, no la foto completa irrelevante?
- ¿Peso optimizado con optimización de imágenes?
Conclusión
object-fit y object-position son herramientas de marca: alinean catálogos, equipo y campañas sin Photoshop en cada tamaño. Invierte una hora en variables de diseño y clases reutilizables en tu tema o CMS; el retorno es consistencia visual, menos tickets de «esta foto se ve rara» y mejor percepción de profesionalidad — especialmente cuando compites por confianza en sectores B2B.
Si quieres auditar cómo se comportan tus imágenes en móvil y escritorio, en aatsoft revisamos plantillas, Core Web Vitals y flujo editorial contigo.
