Al adaptar imágenes para dispositivos móviles, uno de los problemas más frecuentes es que el contenido visual importante queda recortado o desaparece. Esto ocurre porque los contenedores cambian de forma y tamaño, y el navegador aplica un ajuste por defecto que no siempre respeta la intención del diseñador. Dos propiedades CSS, object-fit con los valores cover y contain, junto con object-position, ofrecen el control necesario para decidir exactamente cómo se muestra cada imagen. Esta guía explica cuándo usar cada una, cómo configurarlas y cómo documentar los recortes para que el resultado en móvil sea siempre predecible.

¿Qué hace object-fit y por qué es clave en móvil?

object-fit actúa sobre un elemento reemplazado (como <img> o <video>) dentro de un contenedor con dimensiones definidas. Sin esta propiedad, el navegador suele estirar o comprimir la imagen para que ocupe todo el espacio, lo que distorsiona la escena. Con object-fit, se puede elegir cómo la imagen llena ese contenedor, especialmente cuando las proporciones del contenedor y de la imagen original son diferentes.

En diseño responsive, los contenedores suelen cambiar de ancho y alto. Una imagen que se ve bien en escritorio puede recortarse en móvil si no se especifica el comportamiento. Por eso, entender la diferencia entre cover y contain es esencial para evitar sorpresas.

cover: llenar el contenedor recortando de forma controlada

object-fit: cover escala la imagen manteniendo su relación de aspecto, pero la agranda lo suficiente para cubrir completamente el contenedor. La parte de la imagen que excede el contenedor queda oculta, es decir, se recorta. El resultado es que el contenedor se llena sin deformar la imagen, pero se pierde parte del contenido visual.

Cuándo usar cover

cover es adecuado cuando el objetivo es que el contenedor quede completamente cubierto, sin espacios en blanco, y se acepta que algunos bordes de la imagen desaparezcan. Es común en fondos de secciones, banners o tarjetas donde el texto se superpone a la imagen. También funciona bien cuando el sujeto principal está centrado y el recorte afecta solo a zonas secundarias.

Ejemplo práctico: una foto de un paisaje con el horizonte en el centro. En un contenedor vertical de móvil, cover mantendrá el horizonte y recortará el cielo y el suelo por igual, siempre que el punto de anclaje por defecto sea el centro.

Riesgo de recortar lo importante

Si el sujeto principal no está centrado —por ejemplo, una persona a la izquierda— el recorte automático puede cortar parte de esa persona. Aquí entra en juego object-position, que permite desplazar el punto de anclaje desde el que se realiza el recorte.

contain: mostrar la imagen completa dejando espacio

object-fit: contain escala la imagen para que quepa completamente dentro del contenedor, manteniendo su relación de aspecto. Si el contenedor tiene una relación de aspecto diferente, aparecerán franjas vacías (barras negras o del color de fondo) en los lados que sobran.

Cuándo usar contain

contain es la opción segura cuando es prioritario que el espectador vea la imagen completa, sin ningún recorte. Es ideal para galerías de productos, retratos, logotipos o cualquier imagen donde cada detalle cuenta. El inconveniente es que el diseño puede verse inconsistente si el contenedor es muy alargado o aplastado, porque aparecerán espacios vacíos.

Ejemplo práctico: un catálogo de muebles. Cada foto debe mostrar el mueble entero, aunque el contenedor sea cuadrado y la imagen sea horizontal. Con contain, la imagen se reduce hasta que quepa, dejando bandas laterales.

Personalizar el fondo de las bandas

Con contain, se puede cambiar el color de las bandas usando background-color en el contenedor, o incluso poner un degradado sutil que integre mejor la imagen. Esto mejora la estética sin sacrificar la integridad visual.

object-position: el punto de anclaje que evita recortes no deseados

Tanto con cover como con contain, object-position define desde qué punto de la imagen se alinea con el contenedor cuando hay espacio sobrante o recorte. Por defecto es center center, pero se puede cambiar a coordenadas como top left, right bottom, o valores porcentuales.

Cómo aplicarlo con cover

Cuando se usa cover, el recorte se produce en los bordes opuestos al punto de anclaje. Por ejemplo, si una persona está en la parte izquierda de la foto y el contenedor es vertical, con object-position: left center se asegura que la persona quede dentro, recortando la parte derecha.

Caso real: imagen de un equipo con el líder a la izquierda. En móvil, sin object-position, el recorte podría dejar fuera al líder. Ajustando object-position: 15% center se mantiene visible.

Cómo aplicarlo con contain

Con contain, el punto de anclaje determina dónde se coloca la imagen dentro del espacio sobrante. Si la imagen es más pequeña que el contenedor, object-position: top center la alinea arriba, dejando espacio abajo.

Relación de aspecto: el factor que decide el tipo de recorte

El comportamiento de cover y contain depende directamente de la relación de aspecto del contenedor frente a la de la imagen original. Cuando el contenedor es más alargado que la imagen (por ejemplo, un banner horizontal en escritorio y un contenedor cuadrado en móvil), cover recortará los laterales, mientras que contain mostrará la imagen entera pero con bandas verticales.

Documentar el cambio de relación de aspecto entre escritorio y móvil

Muchos diseños cambian la relación de aspecto en diferentes breakpoints. Por ejemplo, en escritorio la imagen tiene 16:9 y en móvil se fuerza a 4:3. Si no se documenta ese cambio, el equipo de desarrollo puede no anticipar que la imagen se va a recortar de forma distinta. Por eso, para cada imagen es recomendable anotar:

  • El modo object-fit elegido (cover o contain).
  • El valor de object-position (porcentaje exacto o keyword).
  • La relación de aspecto del contenedor en cada breakpoint.

Esta documentación evita que en futuras actualizaciones se pierda el control sobre el recorte.

Cómo decidir entre cover y contain: una regla simple

La elección se reduce a una pregunta: ¿es más importante que el contenedor esté completamente relleno o que la imagen se vea completa? Si el diseño exige que no haya espacios vacíos (por ejemplo, un fondo a pantalla completa), usa cover. Si la imagen debe verse sin cortes (por ejemplo, un retrato de producto), usa contain.

Regla práctica: si el sujeto principal ocupa toda la imagen o está centrado, cover funciona bien. Si el sujeto está descentrado o la imagen tiene elementos importantes cerca de los bordes, contain es más seguro a menos que puedas reubicar el punto de anclaje con object-position.

Aplicación práctica en CSS: ejemplos de código

Ejemplo 1: cover con anclaje específico

.imagen-hero {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  object-position: 20% center;
}

Esta imagen se redimensionará para cubrir el contenedor, pero el recorte priorizará la zona que está al 20% desde la izquierda, protegiendo el sujeto principal.

Ejemplo 2: contain con espaciado

.imagen-producto {
  width: 100%;
  height: 300px;
  object-fit: contain;
  object-position: center;
  background-color: #f0f0f0; /* color de las bandas */
}

La imagen completa se muestra dentro del contenedor, y el fondo gris disimula las bandas laterales.

Ejemplo 3: cambios en responsive

.imagen {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .imagen {
    aspect-ratio: 4 / 3;
    object-position: 30% center;
  }
}

Aquí se cambia la relación de aspecto y el punto de anclaje para móvil, asegurando que el sujeto principal se mantenga visible.

Errores comunes y cómo evitarlos

  • No definir altura al contenedor: si el contenedor no tiene altura fija, object-fit no tiene efecto. En móvil, conviene usar height en px, vh o aspect-ratio.
  • Olvidar object-position en cover: confiar en el centrado por defecto puede recortar lo que está en los bordes. Siempre verifica la composición de la imagen.
  • Usar contain sin color de fondo: las bandas blancas o transparentes pueden distraer. Aplica un color que armonice.
  • No probar en múltiples dispositivos: el recorte cambia con el tamaño exacto del viewport. Usa emuladores y pruebas reales.

Conclusión

Controlar las imágenes en diseño web móvil requiere entender y aplicar object-fit junto con object-position. cover llena el contenedor recortando, y contain muestra la imagen completa con espacios. La elección depende de la prioridad del diseño. Documentar para cada imagen el modo de ajuste, el punto de anclaje y la relación de aspecto en cada breakpoint garantiza que los recortes sean predecibles y no se pierda contenido importante. Con estas herramientas, es posible crear experiencias visuales consistentes sin sorpresas desagradables.

Preguntas frecuentes

¿Qué pasa si no uso object-fit en una imagen responsive?

Sin object-fit, el navegador aplica fill por defecto, que estira o comprime la imagen para llenar el contenedor, distorsionándola. Es mejor usar cover o contain para mantener las proporciones.

¿Puedo usar object-fit en etiquetas <video>?

Sí, object-fit funciona también en <video> y otros elementos reemplazados, con el mismo comportamiento.

¿object-fit funciona en todos los navegadores móviles?

Sí, tiene soporte global desde 2015. En navegadores muy antiguos (IE) no funciona, pero en móvil moderno no hay problemas.

¿Cómo centro la imagen dentro del contenedor con contain?

Con object-position: center la imagen se alinea al centro del espacio sobrante. También puedes usar top, bottom, left, right o porcentajes.

¿Es mejor usar aspect-ratio o height fijo para el contenedor?

aspect-ratio es más flexible y mantiene la proporción sin necesidad de padding-top trucos. Combínalo con object-fit para controlar el recorte.