Responsive Images Not Responding

Question

I was tinkering around with making images responsive, however, I'm not seeing any change in my images, despite the fact that I've given them a predetermined vw which makes me think I have missed a step somewhere.

I currently have my imaged listed like so:

<img src="images/icon_1000x_large.jpg" alt="largeCodeIcon" srcset="images/icon_1000x_large.jpg 1000w, images/icon_500x_medium.jpg 500w, images/icon_200x_small.jpg 200w"
sizes="(min-width: 273px) 20vw, (min-width: 350px) 50vw, 100vw" >

Now in theory, at 273px the image should be 20vw and at 350, 50vw, but there is absolutely no change.

Can anyone help?

This shouldn't change how the image is rendered, rather what image is rendered. If you inspect the image you will see that the src varies based on screen size. — SidTheBeard, Jul 18 '17 at 18:05
@SidTheBeard That;s just the thing though, nothing is changing in the src — Theodore Steiner, Jul 18 '17 at 18:08
One possibility: Once the browser has cached a larger image, it won't go and download smaller versions from a srcset: https://stackoverflow.com/a/30087595/3412322 — Daniel Beck, Jul 18 '17 at 18:09
I think @DanielBeck has a point, I've had the issue in the past where I can see the change starting from the small image going up but once I go to the large image it doesn't go back down. — SidTheBeard, Jul 18 '17 at 19:59

score 0 · Answer 1 · answered Jul 18 '17 at 18:04

After reading a little about this. I noticed others are using max-width not min-width. You may have multiple rules applying simultaneously using min-width. I'm not certain but these rules may not cascade, so the first matching rule could will win. Alternately you may be able to reverse the order and solve the problem that way.

Responsive Images Not Responding

1 Answers1