Why is the HTML5 <picture> tag not resizing the images?

Asked

Viewed 79 times

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>

html html5

  • The code you put down doesn’t even have that tag

1 answer

1

OBS: First of all I believe that you have mistaken the title of the question, because you spoke of <figure>, but in the code you put <picture>, way, your problem is with the order of tags...

Your problem is simple, when using min-width the greatest value always has to come first

First 650px and then 490px, if the value of 490px will overwrite everything that comes after 

<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

Follow the image code above

<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>

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.