Web Design Responsive - Photo
Use o atributo de largura
Se o atributo largura é definida como 100%, a imagem será realizado de acordo com a faixa superior e inferior de funções de resposta:
Note-se que no exemplo acima, a imagem irá ser maior do que a sua imagem original. Podemos usar-max largura atribuir uma boa solução para este problema.
Utilizando-largura máxima propriedade
Se a propriedade Max-largura é definida como 100%, a imagem não será maior do que o seu tamanho original:
Adicionar páginas de imagem
imagem de fundo
imagem de fundo pode responder a redimensionar ou zoom.
A seguir estão três métodos diferentes:
1. Se a propriedade background-size está definido para "conter", a imagem de fundo será a razão de área de conteúdo adaptável. Fotos manter suas proporções inalterada:
Este é o código CSS:
Exemplos
width: 100%;
height: 400px;
background-image: url ( 'img_flowers.jpg ');
background-repeat: no-repeat;
background-size: contêm;
border: 1px solid vermelho;
}
tente »
2. Se a propriedade background-size é definido como "100% 100%", a imagem de fundo será estendida para cobrir toda a região:
Exemplos
Este é o código CSS:
width: 100%;
height: 400px;
background-image: url ( 'img_flowers.jpg ');
fundo de tamanho: 100% 100% ;
border: 1px solid vermelho;
}
tente »
3. Se a propriedade background-size está definido para "cobrir", a imagem de fundo é expandido para ser grande o suficiente para cobrir completamente o fundo, para que a imagem da área de fundo. Observe que a propriedade permanece as proporções da imagem de forma alguma parte da imagem de fundo não pode ser exibido na área de posicionamento do fundo.
Este é o código CSS:
Exemplos
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
tente »
dispositivos diferentes mostram uma imagem diferente
Imagens grandes podem ser exibidos na tela grande, mas eles não mostram bem na tela pequena. Nós não precisamos de carregar a tela pequena no retrato grande, por isso está afetando a velocidade de carregamento. Assim, podemos usar consultas de mídia, dependendo do dispositivo para exibir uma imagem diferente.
A seguir retrato grande e pequena imagem será exibida em diferentes dispositivos:
Exemplos
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ê pode usar consultas de mídia min-device-width substituto min-width atributo, ele irá detectar a largura do dispositivo em vez da largura do navegador. Redefinir o tamanho do navegador, o tamanho da imagem não muda.
Exemplos
body {
background-image: url ( 'img_smallflower.jpg ');
}
/ * Dispositivo maior do que 400px (também igual a): * /
@media única tela e (min-device -width: 400px) {
body {
background-image: url ( 'img_flowers.jpg ');
}
}
tente »
HTML5 <imagem> elemento
do HTML5 <picture> elemento pode ser definido de várias imagens.
Suporte a navegadores
| elemento | |||||
|---|---|---|---|---|---|
| <Imagem> | Não suporta | 38,0 | 38,0 | Não suporta | 25,0 |
<picture> elemento semelhante ao <video> e <audio> elementos. dispositivos diferentes podem ser recursos, recurso primeiro conjunto de utilização preferida:
Exemplos
<Fonte srcset = "img_smallflower.jpg" media = "(max-width: 400px)">
<Fonte srcset = "img_flowers.jpg">
<Img src = "img_flowers.jpg" alt = "Flores">
</ Imagem>
tente »
srcset propriedade deve ser a definição do recurso de imagem.
media atributo é facultativa, em meio consulta CSS @media governar ver os detalhes.
Não suportam <picture> elementos do navegador, você pode definir <img> elemento em vez disso.