Mostrar imagens diferentes dependendo do tamanho da tela com HTML

2a atrás

Para fazer isso, vamos utilizar 3 tags do HTML: picture, source e img. todas essas tags são compatíveis com todos os browsers modernos.

<picture>
  <source media="(max-width:767px)" srcset="https://picsum.photos/400/300">
  <source media="(max-width:991px)" srcset="https://picsum.photos/800/400">
  <img src="https://picsum.photos/1024/480">
</picture>

undefined- media: aceita qualquer CSS media query, nesse caso estamos utilizando media queries de largura (max-width)- srcset: é o caminho da imagem, caso o media query seja satisfeita

O código acima mostrará uma imagem diferente dependendo do tamanho da tela. A primeira é mostrada caso a largura da tela for de até 767px, a segunda até 991px e a terceira é a imagem padrão, nesse caso, será mostrada se a largura for maior que 991px.

#HTML

Comentários (0)