Sabemos que las imágenes desempeñan un papel crucial en una página web. Ayudan a mostrar el contenido de manera efectiva y clara. A veces, la imagen de contenido puede tener un tamaño mayor o menor que el contenedor en el que se pretende mostrar, o su relación de aspecto puede ser diferente a la del contenedor. Consideraremos cómo mostrar una imagen de la mejor manera posible.

object-fit

object-fit especifica cómo debe redimensionarse una imagen para ajustarse a su contenedor.

object-fit: fill | contain | cover | none | scale-down;

• fill: estira la imagen para llenar el contenedor, ignorando la relación de aspecto (puede distorsionar);
• contain: escala la imagen para ajustarse dentro del contenedor manteniendo la relación de aspecto (puede dejar espacio vacío);
• cover: llena completamente el contenedor manteniendo la relación de aspecto (puede recortar);
• none: utiliza el tamaño original de la imagen; puede desbordar el contenedor;
• scale-down: utiliza el menor valor entre none o contain (ya sea el tamaño original o reducido para ajustarse).

object-position

object-position especifica la posición de la imagen dentro de su contenedor. Acepta dos valores: un valor horizontal y un valor vertical, o se pueden usar palabras reservadas.

object-position: x y;