Como criar: imagens responsivas

Aprenda a usar CSS para criar imagens responsivas.

As imagens responsivas se ajustarão automaticamente para适应 o tamanho da tela.

Ajuste o tamanho da janela do navegador para ver o efeito de resposta:

Luzes

Ver efeito

Como criar imagens responsivas

Primeiro passo - Adicionar HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

Segundo passo - Adicionar CSS:

Se você desejar que a capacidade de resposta da imagem possa aumentar e diminuir ao mesmo tempo, defina o CSS width Atributo definido como 100%,height Definido como auto:

Exemplo

.responsive {
  width: 100%;
  height: auto;
}

Experimente pessoalmente

Se você desejar que a imagem diminua quando necessário, mas nunca aumente para um tamanho maior que o original, use max-width: 100%:

Exemplo

.responsive {
  max-width: 100%;
  height: auto;
}

Experimente pessoalmente

Se você quiser limitar a imagem responsiva ao tamanho máximo, use max-width Atributos e o valor de pixel que você escolheu:

Exemplo

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

Experimente pessoalmente

Páginas relacionadas

Tutorial:Imagem CSS

Tutorial:Design de página web responsiva CSS