html - img srcset and sizes not working as I would expect -


i trying make better responsive images on site. after research found the srcset , sizes attributes.

my goal here following:

  • when screen size above 600px or below 300px want serve 250x250 image
  • when between these 2 values want serve 350x350 image
  • also want higher resolution images screens have higher pixel ratio

this came with. not working though would. small 250x250 being served.

<img src="https://placehold.it/250"   srcset="https://placehold.it/700 700w, https://placehold.it/500 500w, https://placehold.it/350 350w, https://placehold.it/250 250w"    sizes="((max-width: 600px) , (min-width: 300px) , (min-resolution: 2)) 350px, (min-resolution: 2) 250px, ((max-width: 600px) , (min-width: 300px)) 350px, 250px" /> 

and have 1 additional question:
in tests found out browser won't load new images when window resized different image should served. possible that?

ok. after tidious research found out did not understand sizes-attribute correctly.

the following how can achieve want:

<img src="https://placehold.it/250"   srcset="https://placehold.it/700 700w, https://placehold.it/500 500w, https://placehold.it/350 350w, https://placehold.it/250 250w"    sizes="(max-width: 600px) calc(100vw - 50px), 250px" /> 

Comments

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -