Imagem | Parte 3 | Tutorial de HTML5 | #14 | #uninerds | Universo dos Nerds
5Código fonte da vídeo aula:
http://www.uninerds.net/?locale=pt_BR#!html-css-e-javascript/tutorial-de-html5
Media Query:
https://youtu.be/9eMgdo80zmA
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 #html #html5
Afiliado: http://www.cursos24horas.com.br/parceiro.asp?cod=promocao131331
Contato: uninerds@uninerds.net
Para colocar imagem em HTML é utilizado a tag img que tem os seguintes atributos:
- srcset para informar imagens diferentes para dispositivos com características diferentes
- sizes para informar o tamanho que a imagem irá cobrir em características diferentes, aqui pode ser utilizado técnicas de Media Query que já foram abordadas no Tutorial de CSS
ma alternativa aos atributos srcset e sizes é 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 dela são:
- srcset para informar qual será a imagem utilizada na situação
- media é utilizado as regras do Media Query para definir se o dispositivo contém as características para a imagem
- sizes funciona da mesma forma que na tag img
- type serve para definir o tipo de conteúdo do source
Atenção: Informe cada source do maior para o menor, porque o primeiro que conseguir atender as especificações é o que será utilizado