0

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<picture>
   <source media="(min-width: 490px)" srcset="img/smartphone.jpg"/>
   <source media="(min-width: 650px)" srcset="img/bola.jpg"/>
   <img src="img/geometria.jpg"/>
</picture>

</body>
</html>

1
  • O código que colocou nem tem essa tag
    – Costamilam
    Commented 2/05/2019 às 21:53

1 Resposta 1

1

OBS: Primeiramente acredito que vc tenha se confundido no título da pergunta, pois falou de <figure>, mas no código vc colocou <picture>, de qq forma, seu problema é com a ordem das tags...

Seu problema é simples, quando se usa min-width o maior valor sempre tem que vir primeiro

Primeiro 650px e depois 490px, se nao for nessa ordem o valor de 490px vai sobrescrever tudo que vier após

<source media="(min-width: 650px)" srcset="http://placecage.com/300/100" />
<source media="(min-width: 490px)" srcset="http://placecage.com/200/100" />

inserir a descrição da imagem aqui

Segue o código da imagem acima

<picture>
    <source media="(min-width: 650px)" srcset="http://placecage.com/300/100" />
    <source media="(min-width: 490px)" srcset="http://placecage.com/200/100" />
    <img src="http://placecage.com/100/100" />
</picture>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .