Corte imagens no CSS com object-fit

Tiago José — Sat, 04 Jul 2020 22:01:29 +0000

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.

Usplash: person hand holding photo frame

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

Referências

➕ Telegram	🌐 Blog

Diferenças entre querySelector() e getElementById()

Tiago José — Mon, 15 Jun 2020 22:02:47 +0000

Recentemente comecei a estudar JavaScript por "n" motivos e uma coisa que eu pude perceber, é que uns professores ensinam a mexer na DOM usando o getElementById() e outros usam o querySelector(). De inicio achei normal já que fazem praticamente a mesma coisa, porém não são os mesmos. Sabendo disso, resolvi trazer esse post mostrando algumas informações encontradas.

Qual a função de cada um

querySelector()

Retorna o primeiro elemento dentro do documeto que foi especificado pelo seletor. O querySelector() aceita os atributos ids, classes e outros parametros de seleção.

Exemplo:



<h2 class="exemplo"></h2>
<script>
    document.querySelector(".exemplo").innerHTML = "Olá mundo!";
</script>



Olá mundo!

getElementById()

O getElementById retorna o elemento com o id selecionado.

Exemplo:



<h2 class="exemplo"></h2>
<script>
    document.getElementById("exemplo").innerHTML = "Como está?";
</script>



Como está?

Como o metódo procura somente ids, não será necessário usar o "#" para especificar que é um id. Diferente do querySelector() que deve sim informar, já que faz uma busca em todo o documento por aquilo que foi especificado.

Benchmarck

Mesmo sendo similares, o querySelector() pode procura em uma DOM, uma id ou classe, diferente do getElementById() que só procura pela id selecionada. Mas será que há uma diferença no quesito velocidade? Pelo visto sim, e é o que o site MeasureThat.net pode mostrar nesse benchmark:

Fonte: MeasureThat.net

Segundo o benchmark, o método getElementById() tem 922,827.555 execuções por segundo, enquanto o querySelector() tem somente 467,885.649. Olhando pelo gráfico fica visivelmente perceptível qual é o que se sai melhor.

➕ Telegram	🌐 Blog

DEV Community: Tiago José