Usando a propriedade de largura
Se a width propriedade é definida como 100%, a imagem será sensível e escalar cima e para baixo:
Note-se que no exemplo acima, a imagem pode ser dimensionado para ser maior do que o seu tamanho original. Uma melhor solução, em muitos casos, será usar o max-width propriedade, em vez.
Usando a propriedade max-width
Se o max-width propriedade é definida como 100%, a imagem será ampliado para baixo se ele tem que, mas nunca escalar até ser maior do que seu tamanho original:
Adicionar uma imagem à página Web Exemplo
Imagens de fundo
imagens de fundo também pode responder a redimensionar e escalar.
Aqui vamos mostrar três diferentes métodos:
1. Se o background-size propriedade é definida como "conter", a imagem de fundo será ampliado, e tentar encaixar a área de conteúdo. No entanto, a imagem irá manter sua relação de aspecto (a relação proporcional entre largura e altura da imagem):
Aqui está 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;
} Tente você mesmo " 2. Se o background-size propriedade é definida como "100% 100%", a imagem de fundo vai esticar para cobrir toda a área de conteúdo:
Aqui está o código CSS:
Exemplo
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
} Tente você mesmo " 3. Se o background-size propriedade é definida como "cover" , a imagem de fundo será ampliado para cobrir toda a área de conteúdo. Observe que o "cover" valor mantém a relação de aspecto, e alguma parte da imagem de fundo pode ser cortada:
Aqui está o código CSS:
Exemplo
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
} Tente você mesmo " Imagens diferentes para diferentes dispositivos
Uma imagem grande pode ser perfeito em uma tela de computador grande, mas inútil em um pequeno dispositivo. Por que carregar uma imagem grande quando você tem que reduzir a escala de qualquer maneira? Para reduzir a carga, ou por quaisquer outros motivos, você pode usar consultas de mídia para exibir imagens diferentes em diferentes dispositivos.
Aqui está uma imagem grande e uma imagem menor que será exibido em diferentes dispositivos:
Exemplo
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
} Tente você mesmo " É possível usar a consulta de meios min-device-width , em vez de min-width , que verifica a largura do dispositivo, em vez da largura do navegador. Em seguida, a imagem não vai mudar quando você redimensionar a janela do navegador:
Exemplo
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
} Tente você mesmo " HTML5 <picture> Elemento
HTML5 introduziu o <picture> elemento, que permite definir mais de uma imagem.
Suporte a navegadores
| Elemento | |||||
|---|---|---|---|---|---|
| <picture> | Não suportado | 38,0 | 38,0 | Não suportado | 25,0 |
O <picture> elemento funciona de forma semelhante ao <video> e <audio> elementos. Você configurar diferentes fontes, e a primeira fonte que se adapta às preferências é o que está sendo usado:
Exemplo
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture> Tente você mesmo " O srcset atributo é necessário, e define a fonte da imagem.
A media atributo é opcional, e aceita as consultas de mídia que você encontra em regra CSS @media .
Você também deve definir um <img> elemento para browsers que não suportam o <picture> elemento.