El elemento de HTML es mucho más complejo de lo que parece asimple vista: funciona como un contenedor cuyo contenido es el propio recurso gráfico, y ambos pueden controlarse de forma independiente. Al inspeccionar sus estilos por defecto en el navegador se observa que el navegador aplica overflow: clip, lo que oculta cualquier desbordamiento del contenido respecto al contenedor.
Ese desbordamiento, contra lo que cabría esperar, se produce en situaciones cotidianas. Cuando se aplica object-fit: cover, el contenido se dimensiona para mantener la proporción intrínseca de la imagen y suele ser mayor que el contenedor, lo que genera un recorte que por defecto queda.clipado. Cambiar la propiedad a overflow: visible lo haría visible. De forma similar, border-radius puede provocar que la imagen rectangular sobresalga de sus esquinas redondeadas, y object-position desplaza el contenido dentro del contenedor sin alterar el tamaño de este.
Otro valor clave es object-fit: none, que conserva las dimensiones intrínsecas del recurso sin redimensionarlo al espacio CSS del elemento. Así, si el contenedor es más pequeño que la imagen original, aparece un nuevo desbordamiento. Su valor opuesto, fill, ajusta el contenido al tamaño del contenedor.
Para entenderlo, conviene recordar que es un elemento reemplazado (replaced element), cuyo contenido queda fuera del modelo de formato CSS pero cuyas dimensiones naturales sí participan en los cálculos de layout. Esa condición de “contenedor y contenido a la vez” permite crear efectos avanzados sin elementos adicionales: transiciones al hacer hover, animaciones 3D, pantallas de carga o figuras decorativas con corner-shape, controlando únicamente object-fit, object-position y overflow.