<!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>
-
O código que colocou nem tem essa tag– CostamilamCommented 2/05/2019 às 21:53
Adicione um comentário
|
1 Resposta
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" />
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>