Web Design Responsivo - Imagens
Redimensione a janela do navegador para ver como a imagem é dimensionada para caber na página.
Usando a propriedade largura
Se a widthpropriedade estiver definida como uma porcentagem e a heightpropriedade estiver definida como "automática", a imagem será responsiva e será dimensionada para cima e para baixo:
Exemplo
img {
width: 100%;
height: auto;
}
Observe que no exemplo acima, a imagem pode ser ampliada para ser maior que seu tamanho original. Uma solução melhor, em muitos casos, será usar a
max-widthpropriedade.
Usando a propriedade max-width
Se a max-widthpropriedade estiver definida como 100%, a imagem será reduzida se necessário, mas nunca será aumentada para ser maior que seu tamanho original:
Exemplo
img {
max-width: 100%;
height: auto;
}
Adicionar uma imagem à página da Web de exemplo
Exemplo
img {
width: 100%;
height: auto;
}
Imagens de fundo
As imagens de fundo também podem responder ao redimensionamento e dimensionamento.
Aqui vamos mostrar três métodos diferentes:
1. Se a background-sizepropriedade estiver configurada para "conter", a imagem de fundo será dimensionada e tentará se ajustar à área de conteúdo. No entanto, a imagem manterá sua proporção (a relação proporcional entre a largura e a 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;
}
2. Se a background-sizepropriedade estiver definida como "100% 100%", a imagem de fundo se estenderá 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;
}
3. Se a background-sizepropriedade estiver configurada para "cobrir", a imagem de fundo será dimensionada para cobrir toda a área de conteúdo. Observe que o valor "cover" mantém a proporção 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;
}
Imagens diferentes para dispositivos diferentes
Uma imagem grande pode ser perfeita em uma tela grande de computador, mas inútil em um dispositivo pequeno. Por que carregar uma imagem grande quando você precisa reduzi-la de qualquer maneira? Para reduzir a carga ou por qualquer outro motivo, você pode usar consultas de mídia para exibir imagens diferentes em dispositivos diferentes.
Aqui está uma imagem grande e uma imagem menor que serão exibidas 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');
}
}
Você pode usar a consulta de mídia min-device-width, em vez de min-width, que verifica a largura do dispositivo, em vez da largura do navegador. Então a imagem não 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');
}
}
O elemento HTML <picture>
O elemento HTML <picture>oferece aos desenvolvedores da Web mais flexibilidade na especificação de recursos de imagem.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.