Design de página web responsiva - Imagens

Usar a propriedade width

Se width propriedade configurada como porcentagem e a altura configurada como "auto", a imagem responderá para ampliar ou diminuir:

Exemplo

img {
  width: 100%;
  height: auto;
}

Experimente pessoalmente

Observe que, no exemplo acima, a imagem pode ser ampliada para um tamanho maior do que o original. Na maioria dos casos, uma solução melhor é usar max-width propriedade.

Usar a propriedade max-width

Se a propriedade max-width for configurada como 100%, a imagem será ajustada conforme necessário, mas nunca será ampliada para um tamanho maior do que o original:

Exemplo

img {
  max-width: 100%;
  height: auto;
}

Experimente pessoalmente

Adicionar imagem ao exemplo de página web

Exemplo

img {
  width: 100%;
  height: auto;
}

Experimente pessoalmente

A imagem de fundo

A imagem de fundo também pode responder a ajustes de tamanho e escala.

Estes são os três métodos diferentes que mostramos:

1. Se configurar background-size A propriedade configurada como "contain" fará com que a imagem de fundo seja ajustada e tentará coincidir com a área de conteúdo. No entanto, a imagem manterá suas proporções de largura e altura (a relação entre a largura e a altura da imagem):

Este é o código CSS:

Exemplo

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

Experimente pessoalmente

2. Se background-size Se o atributo for definido como "100% 100%", a imagem de fundo será esticada para cobrir toda a área de conteúdo:

Este é o código CSS:

Exemplo

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

Experimente pessoalmente

3. Se background-size Se o atributo for definido como "cover", a imagem de fundo será escalonada para cobrir toda a área de conteúdo. Observe que o valor "cover" mantém a proporção de largura e altura e pode cortar parte da imagem de fundo:

Este é o código CSS:

Exemplo

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

Experimente pessoalmente

Prepare imagens diferentes para diferentes dispositivos

A grande imagem pode ser exibida perfeitamente em telas de computadores grandes, mas é inútil em dispositivos pequenos. Por que carregar uma grande imagem quando não é necessário? Para reduzir a carga ou por qualquer outra razão, você pode usar consultas de mídia para exibir imagens diferentes em diferentes dispositivos.

Isso é uma grande imagem e uma pequena imagem, que serão exibidas em diferentes dispositivos:

Exemplo

/* Para larguras menores que 400 pixels: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Para larguras de 400 pixels ou maiores: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Experimente pessoalmente

Você pode usar consultas de mídia min-device-width em vez de min-width Para verificar a largura do dispositivo, em vez da largura do navegador. Então, quando você ajusta o tamanho da janela do navegador, a imagem não mudará:

Exemplo

/* Para dispositivos com menos de 400 pixels: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Para dispositivos de 400 pixels ou maiores: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Experimente pessoalmente

O elemento <picture> do HTML5

HTML5 introduziu <picture> O elemento permite que você defina várias imagens.

Suporte do navegador

38.0 13 38.0 9.1 25.0

<picture> A função do elemento é semelhante a <video> e <audio> Elementos. Definimos diferentes fontes e a prioridade de correspondência da primeira fonte é a fonte em uso:

Exemplo

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

Experimente pessoalmente

srcset O atributo é obrigatório, ele define a origem da imagem.

media O atributo é opcional, ele aceita Regra @media CSS encontradas nas consultas de mídia.

Dica:Você também deve fornecer para suporte <picture> Definição do navegador do elemento <img> Elemento.