Trabalhe com Imagens
Sabemos que as imagens têm um papel crucial em uma página da web. Elas ajudam a apresentar o conteúdo de forma eficaz e clara. Às vezes, a imagem do conteúdo pode ter um tamanho maior ou menor do que o contêiner em que se destina a ser exibida, ou sua proporção pode ser diferente da do contêiner. Vamos considerar como mostrar uma imagem da melhor maneira possível.
object-fit
object-fit
especifica como uma imagem deve ser redimensionada para se adequar ao seu contêiner.
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 original. Isso pode resultar em um espaço vazio 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 transborde 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 no seu tamanho natural se ela couber dentro do contêiner.
index.html
index.css
index.js
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.
index.html
index.css
index.js
Tudo estava claro?
Conteúdo do Curso
CSS Fundamentals
1. Introdução ao CSS
3. Modelo de Caixa e Espaçamento de Elementos
CSS Fundamentals
Trabalhe com Imagens
Sabemos que as imagens têm um papel crucial em uma página da web. Elas ajudam a apresentar o conteúdo de forma eficaz e clara. Às vezes, a imagem do conteúdo pode ter um tamanho maior ou menor do que o contêiner em que se destina a ser exibida, ou sua proporção pode ser diferente da do contêiner. Vamos considerar como mostrar uma imagem da melhor maneira possível.
object-fit
object-fit
especifica como uma imagem deve ser redimensionada para se adequar ao seu contêiner.
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 original. Isso pode resultar em um espaço vazio 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 transborde 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 no seu tamanho natural se ela couber dentro do contêiner.
index.html
index.css
index.js
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.
index.html
index.css
index.js
Tudo estava claro?