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.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
