Técnicas de CSS que economizam tempo para criar imagens responsivas

Como desenvolvedor web, é muito provável que você tenha encontrado os dois inimigos deste artigo: imagens e prazos . Às vezes, por alguns motivos, suas imagens não cabem no layout e você não quer se envolver com isso por horas.

Esta situação já me aconteceu muitas vezes e aprendi com os meus erros. Chega de hacks de magia negra - aqui estão minhas cinco técnicas favoritas para lidar com o redimensionamento de imagens.

a maneira “OMG, EU PRECISO ISTO ASAP”

São 17h da sexta-feira, você tem que terminar esta página, mas as imagens não cabem no layout. É hora de usar seu truque de mágica!

.myImg { background-image: url("my-image.png"); background-size: cover; }

Soa familiar? Todos nós já fizemos isso uma vez, não parece que estou traindo você?

Usar backgroundpropriedades é muito útil, elas simplesmente funcionam. No entanto, lembre-se de que você deve usá-los apenas para imagens sem conteúdo ou como substituição de texto e em alguns casos particulares.

O caminho do futuro

E se eu dissesse que esse tipo de magia existe também para elementos? Diga “oi” à propriedade de ajuste do objeto - que também funciona para vídeos, a propósito!

.myImg { object-fit: cover; width: 320px; height: 180px; }

Isso é tudo, pessoal! Veja como, quando recuperamos o valor amigável cover, também podemos usar contain.

Ok, qual é a armadilha?

Infelizmente object-fitnão funcionará no IE e em versões anteriores do Safari, mas há um polyfill.

O jeito “Netflix”

Você pode pensar “bom truque cara, mais uma maneira que não funciona em navegadores antigos como o IE?”. Não se preocupe, este funciona em qualquer lugar e é o meu favorito! Você precisará envolver sua imagem com um pai preenchido relativo.

Manteremos a proporção da imagem com uma porcentagem do paddingimóvel. Sua imagem será uma criança absoluta em tamanho real.

O código é parecido com este:

.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

"Ei cara, parece complicado."

Depois de entender o conceito, a técnica é simples e amplamente utilizada. Netflix usa!

Uma pequena demonstração:

A maneira simples

Você já deve conhecer este:

img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }

Se seu layout não for muito complicado, ele funciona na maioria dos casos.

A forma de desempenho (avançado)

Por desempenho, quero dizer tempos de carregamento. Uma grande imagem de herói pode arruiná-lo e fazer sua página parecer lenta, especialmente no celular.

Você sabia que nos navegadores modernos você pode alterar a origem da imagem dependendo da largura da página? É para isso que srcsetfoi feito!

Você pode combiná-los com a tag HTML 5 , que degrada normalmente com um .

Para Recapitular

  1. Use background-image se a sua imagem não fizer parte do conteúdo da página.
  2. Use object-fitse você não se importa com o IE.
  3. A técnica de contêiner acolchoado, usada pela Netflix, funciona em qualquer lugar.
  4. Na maioria dos casos, basta adicionar height: auto;seu CSS.
  5. Se você precisa de tempos de carregamento rápidos, use srcsetpara carregar imagens menores no celular.