Sabemos que as imagens desempenham um papel crucial em uma página web. Elas ajudam a apresentar o conteúdo de forma eficaz e clara. Às vezes, a imagem de conteúdo pode ter um tamanho maior ou menor do que o contêiner onde deve ser exibida, ou sua proporção pode ser diferente da do contêiner. Vamos analisar como exibir uma imagem da melhor maneira possível.

object-fit

object-fit especifica como uma imagem deve ser redimensionada para se ajustar ao seu contêiner.

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

• fill: estica a imagem para preencher o contêiner, ignorando a proporção (pode distorcer);
• contain: ajusta a imagem para caber dentro do contêiner mantendo a proporção (pode deixar espaços vazios);
• cover: preenche completamente o contêiner mantendo a proporção (pode cortar a imagem);
• none: utiliza o tamanho original da imagem; pode ultrapassar o contêiner;
• scale-down: utiliza o menor valor entre none ou contain (tamanho original ou reduzido para caber).

object-position

object-position especifica a posição da imagem dentro de seu contêiner. Aceita dois valores: um valor horizontal e um valor vertical, ou podemos usar palavras reservadas.

object-position: x y;