CSS object-fit

La propiedad <object-fit> en CSS controla cómo se ajusta una imagen o video a su contenedor. Es clave cuando las proporciones originales no coinciden con el tamaño definido.

Fundamentos de object-fit

<object-fit> define cómo encaja una imagen en un contenedor con ancho y alto fijos. Los valores más comunes son cover y contain.

Ejemplos simples

Los siguientes ejemplos muestran cómo se comporta la misma imagen con diferentes valores de object-fit.

Comparación entre Cover y Contain

Cover llena el contenedor recortando la imagen, mientras que contain mantiene la imagen completa pero puede dejar espacio vacío.

Consejos para usar object-fit

Object-fit es muy útil en diseño responsivo, pero hay que cuidar la experiencia del usuario.

• Usa cover si lo más importante es llenar visualmente el espacio.
• Usa contain si lo importante es mostrar la imagen completa.
• Prueba las configuraciones en móvil y escritorio para obtener el mejor resultado.