Imagem | Design Web Responsivo | #5 | #uninerds | Universo dos Nerds
6Código fonte da vídeo aula:
http://www.uninerds.net/?locale=pt_BR#!html-css-e-javascript/css-responsivo
Para saber mais sobre a tag picture assista esse vídeo:
https://youtu.be/5mNfuNYRuqE
Redes Sociais
Facebook: https://www.facebook.com/uninerds
Twitter: https://www.twitter.com/uninerds
YouTube: https://www.youtube.com/user/uninerds?sub_confirmation=1
LinkedIn: https://www.linkedin.com/company/uninerds
Instagram: https://www.instagram.com/uninerds
Gostou do vídeo? Veja 10 opções de como você pode apoiar o Universo dos Nerds:
https://youtu.be/KYAljlRtlb4
Faça parte de um grupo focado em Tecnologia: https://www.facebook.com/groups/DevAt
Hashtags: #uninerds #css #cssresponsivo
Afiliado: http://www.cursos24horas.com.br/parceiro.asp?cod=promocao131331
Contato: uninerds@uninerds.net
Quando colocamos imagem em uma página responsiva podemos ter problema se a imagem tiver largura maior que a do dispositivo e como não sabemos qual será temos que resolver em CSS.
Neste código definimos que todas as imagens terão largura de 100% e a altura será proporcional a largura.
Mas não é a melhor solução porque se a largura da imagem for menor que a do dispositivo irá esticar a imagem fazendo com que ela perca qualidade, então para resolver isso ao invés de usar width devemos utilizar max-width.
Para ter o mesmo efeito para imagem de fundo coloque no código a seguinte div:
E no CSS o seguinte:
Em imagem coloque o nome de uma imagem, e para fazer a imagem de fundo ficar responsiva utilizamos a propriedade background-size e nela podemos definir os seguintes valores:
- contain a imagem será redimensionada somente quando a div for menor que a imagem, senão a imagem ficará em tamanho normal
- 100% 100% a imagem irá ocupar toda largura e altura da div
- cover irá redimensionar a largura e altura de forma proporcional
Também podemos utilizar a consulta de mídia para colocar fundo diferente para cada característica.
Outra opção é a tag picture e entre a abertura e fechamento pode ter uma ou mais tags source e uma img caso nenhuma source seja atendida pelo dispositivo e os atributos principais dela são:
- srcset para informar qual será a imagem utilizada na situação
- media é utilizado as regras de consulta de mídia para definir se o dispositivo contém as características para a imagem
Atenção: O primeiro source que conseguir atender as especificações é o que será utilizado, para saber mais sobre esta tag clique aqui e assista ao vídeo que fizemos sobre ela.