Se você está envolvido no desenvolvimento da Web, é altamente provável que esteja familiarizado com dois monstros, que serão discutidos no artigo, cuja tradução publicamos hoje. Estamos falando de imagens e prazos. Às vezes, por algum motivo, as imagens não desejam caber nos locais dos layouts de página projetados para elas, e você não pode gastar várias horas para descobrir isso.
O autor deste material diz que muitas vezes enfrentava um problema semelhante, e essas colisões lhe ensinaram algo. Aqui ele quer falar sobre cinco abordagens para gerenciar os tamanhos de imagem que ele mais gosta.
Abordagem nº 1: imagem de fundo
Sexta-feira. Cinco horas da noite. Você precisa urgentemente terminar uma determinada página. Tudo está pronto, o único problema são as imagens, que de nenhuma maneira se encaixam onde deveriam estar. Se isso aconteceu com você - aqui está uma ferramenta mágica que irá ajudá-lo:
.myImg { background-image: url("my-image.png"); background-size: cover; }
Parece familiar? Todos nós fizemos isso uma vez. Isso sugeriu uma fraude para você?
Usar as propriedades de
background é muito útil, elas apenas fazem o que é esperado delas. No entanto, vale lembrar que eles devem ser usados apenas para as imagens que não fazem parte do conteúdo principal da página, para imagens que substituem o texto e, em alguns
casos especiais .
Abordagem # 2: ajuste ao objeto
E se eu disser que a propriedade de
object-fit do
object-fit aplica aos elementos
<img> ? A propósito, ele também funciona com vídeo.
.myImg { object-fit: cover; width: 320px; height: 180px; }
Isso é tudo. Observe que a propriedade de
object-fit do
object-fit pode ser configurada para
contain .
SupportSuporte para ajuste de objeto
Infelizmente, o
object-fit não funcionará no IE e nas versões mais antigas do Safari, no entanto, nesses casos, existe um
polyfill .
Aqui estão as informações de suporte obtidas
aqui .
Suporte para navegadores de desktop ajustados ao objeto→
Aqui está um exemplo usando ajuste de objeto
Abordagem nº 3: a maneira como a Netflix usa
O que acabamos de falar pode parecer interessante, mas em navegadores desatualizados, sem polyfills, isso não funcionará. Se você precisa de algo universal, talvez o que falaremos agora seja o mais adequado para você. Este método, um dos meus favoritos, funciona em qualquer lugar.
Consiste no fato de que a imagem deve ser colocada no elemento pai, cuja propriedade
position é definida como
relative e a propriedade
padding é definida em termos percentuais. Como resultado, a imagem ocupará toda a área livre do elemento pai. É assim:
.wrapper { position: relative; padding-top: 56.25%; } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
Aqui você pode pensar que é muito complicado. No entanto, depois de entender o significado dessa técnica, você percebe que é muito simples e conveniente. Além disso, essa técnica é
amplamente usada , por exemplo, no Netflix.
Dê uma olhada nos nomes das classes→
Aqui está um exemplo da implementação desta técnica
Abordagem nº 4: altura
Aqui, para controlar o tamanho da imagem, use a propriedade
height: auto e, além disso, a propriedade
max-width . É possível que você já conheça esta técnica:
img { height: auto; width: 100%; max-width: 720px; }
Essa abordagem é aplicável na maioria dos casos, quando seu layout não é muito complicado.
→
Aqui está um exemploAbordagem nº 5: gerenciamento e desempenho de imagens
Por "desempenho", quero dizer o tempo de carregamento da página. Uma imagem grande pode levar muito tempo para carregar, o que dá ao usuário a impressão de que suas páginas estão lentas, especialmente se essas páginas são exibidas em dispositivos móveis.
Você sabia que nos
navegadores modernos você pode alterar a fonte da imagem dependendo da largura da página? É por isso que o atributo
srcset .
Atributos semelhantes podem ser usados na tag HTML 5
. , , <img> . , , <img> :
<picture> <source media="(max-width: 799px)" srcset="elva-480w.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img align="center" src="elva-800w.jpg"> </picture>
→ Aqui está um exemploSumário
Para resumir:
- Se sua imagem não fizer parte do conteúdo da página, use
background-image . - Se o suporte ao IE não lhe interessar, use
object-fit . - A tecnologia de contêiner baseada na Netflix com
padding personalizado funciona em qualquer lugar. - Na maioria dos casos, para resolver o problema com imagens, basta usar a propriedade
height: auto no CSS; - Se você deseja reduzir o tempo de carregamento da página, use o atributo
srcset para baixar imagens menores em dispositivos móveis.
Esperamos que as abordagens para trabalhar com imagens discutidas aqui sejam úteis para você.
