Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Trabalhando com Imagens em CSS | Adicionando Efeitos Decorativos com CSS
Fundamentos de CSS

bookTrabalhando com Imagens em CSS

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 considerar 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, independentemente de sua proporção. Isso pode fazer com que a imagem seja cortada ou distorcida;
  • contain redimensiona a imagem para caber no contêiner, preservando sua proporção. Isso pode resultar em espaços vazios ao redor da imagem se o contêiner e a imagem tiverem proporções diferentes;
  • cover redimensiona a imagem para cobrir completamente o contêiner, preservando sua proporção;
  • none exibe a imagem em seu tamanho original, independentemente do tamanho do contêiner. Isso pode fazer com que a imagem ultrapasse o contêiner;
  • scale-down reduz a imagem para caber no contêiner se ela for maior que o tamanho natural da imagem, ou exibe a imagem em seu tamanho natural se ela couber no contêiner.
index.html

index.html

index.css

index.css

copy

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 pode-se usar palavras reservadas.

object-position: x y;
index.html

index.html

index.css

index.css

copy
question mark

O que a propriedade object-fit faz?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 3

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.56

bookTrabalhando com Imagens em CSS

Deslize para mostrar o menu

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 considerar 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, independentemente de sua proporção. Isso pode fazer com que a imagem seja cortada ou distorcida;
  • contain redimensiona a imagem para caber no contêiner, preservando sua proporção. Isso pode resultar em espaços vazios ao redor da imagem se o contêiner e a imagem tiverem proporções diferentes;
  • cover redimensiona a imagem para cobrir completamente o contêiner, preservando sua proporção;
  • none exibe a imagem em seu tamanho original, independentemente do tamanho do contêiner. Isso pode fazer com que a imagem ultrapasse o contêiner;
  • scale-down reduz a imagem para caber no contêiner se ela for maior que o tamanho natural da imagem, ou exibe a imagem em seu tamanho natural se ela couber no contêiner.
index.html

index.html

index.css

index.css

copy

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 pode-se usar palavras reservadas.

object-position: x y;
index.html

index.html

index.css

index.css

copy
question mark

O que a propriedade object-fit faz?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 3
some-alt