- Página Inicial
- Códigos HTML Prontos
- Html picture
- Voltar
Html picture
A tag html picture oferece aos desenvolvedores da Web mais flexibilidade na especificação de recursos de imagem.
O uso mais comum do elemento <picture>
será para direção de arte em designs responsivos.
Em vez de ter uma imagem que é dimensionada para cima ou para baixo com base na largura da janela de visualização, várias imagens podem ser projetadas para preencher melhor a janela de visualização do navegador.
Veja o exemplo no código.
Copie o código abaixo e redimensione a janela do navegador para carregar imagens diferentes.
<picture> <source media="(min-width:768px)" srcset="img_capa_tablet.jpg"> <source media="(min-width:480px)" srcset="img_capa_phone.jpg"> <img src="img_capa.jpg" alt="Capa" title="Capa" style="width:auto;"> </picture>
O elemento <picture>
contém duas tags: uma ou mais tags <source> e uma tag <img>.
O navegador procurará o primeiro elemento <source> onde a consulta de mídia corresponde à largura da janela de visualização atual e, em seguida, exibirá a imagem adequada (especificada no atributo srcset). O elemento <img> é necessário como o último filho do elemento <picture>
, como uma opção de fallback se nenhuma das tags de origem corresponder.
Dica: O elemento <picture>
funciona semelhante a tag <video> e <audio>.
Você configura fontes diferentes e a primeira fonte que se ajusta às preferências é a que está sendo usada.
Publicado por: Loop Nerd
354 Visualizações
Deixe um comentário