Créditos da imagem de capa: Just about Photography
Você já ouviu falar da propriedade object-fit do CSS3? Se não, vale a pena ler este artigo, pois ela é bem interessante de se conhecer.
O object-fit é uma propriedade que permite que faça ajustes no redimensionamento da imagem dentro de um container, o que significa que você pode escalar imagens, ocupar todo o container e resolver aquele famoso problema daquelas imagens bastante desproporcionais e que você precisa redimensiona-las dentro de um quadrado ou círculo, por exemplo.
Os principais valores dessa propriedade são:
- fill
- cover
- none
- scale-down
- contain
O fill é o padrão. Ele dimensiona o conteúdo dentro do container ocupando todo o espaço e não necessariamente irá deixar a imagem proporcional. Para isso é necessário utilizar o valor cover (que é o mais utilizado). Ele irá dimensionar o conteúdo proporcionalmente no container, porém o mesmo acaba "cortando" alguns trechos da imagem. Se você quer manter a imagem proporcional, mas dentro do elemento sem mantê-lo esticado ou cortando algum pedaço dela o contain é a melhor solução, mas vale ressaltar que ele não irá ocupar todo o espaço como é o cover. O scale-down é bem parecido com o contain, porém diminui a escala. Por fim temos o none que não redimensiona a imagem.
O exemplo abaixo mostra bem o que foi escrito acima:
Para saber mais (incluindo compatibilidade com os navegadores) vocês podem acessar o Mozilla em português para mais informações.
Até a próxima!
Top comments (0)