Aquele momento em que você faz uma página toda bonita e precisa adicionar uma imagem 1:1 mas tem uma 3:4, o que fazer? Bom, eu acredito que você queira ir até um editor gráfico para recortar a imagem. Mas, e se eu te falar que tem como fazer este recorte sem precisar do editor, somente usando o CSS? Você acredita? Se sim, ótimo, mas se não acredita, este post vai te mostrar que é possível.
Para que a imagem seja cortada, será necessário de uma única propriedade, o object-fit, que especifica como o conteúdo deve ficar dentro do atributo determinado e para isso, eu irei te mostrar como usa-lo e o significado de seus 5 valores.
Será usada essa imagem acima como exemplo, ela possui originalmente 1920px de largura e 1280px altura e foi reduzida para 300px de largura e altura, isso não irá perder a qualidade, mas vai achatar. O object-fit pode ajudar, e eu irei mostrar as diferenças entre cada um.
O contain faz com que a imagem se reduza para conter dentro do espaço definido, sem que haja cortes.
O cover faz com que a imagem sofra um zoom até que todas as bordas sejam preenchidas.
O fill faz com que a imagem seja achatada para que ela caiba totalmente no espaço.
O none irá usar um algoritmo para capturar o trecho da imagem correspondente ao tamanho definido.
O scale-down dimensiona a imagem se o none ou contain for especificado, fazendo com que a imagem tenha um tamanho menor.
Suporte dos navegadores
Desktop:
| Chrome | Firefox | Opera | Safari | Edge | Internet Explorer |
|---|---|---|---|---|---|
| 31 | 36 | 19 | 10 | 79 | Não tem |
Smartphone / Tablet:
| Chrome | Firefox | Opera | Safari | Android WebView |
|---|---|---|---|---|
| 81 | 68 | 24 | 10.0-10.2 | 4.4.3-4.4.4 |
Top comments (0)