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, sin tener en cuenta su relación de aspecto. Esto puede causar que la imagen se recorte o distorsione;
• contain escala la imagen para ajustarse al contenedor manteniendo su relación de aspecto. Esto puede resultar en espacios vacíos alrededor de la imagen si el contenedor y la imagen tienen relaciones de aspecto diferentes;
• cover escala la imagen para cubrir completamente el contenedor manteniendo su relación de aspecto;
• none muestra la imagen en su tamaño original, sin importar el tamaño del contenedor. Esto puede causar que la imagen sobresalga del contenedor;
• scale-down reduce la imagen para ajustarse al contenedor si es más grande que su tamaño natural, o muestra la imagen en su tamaño natural si cabe dentro del contenedor.

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;