CODEWITHSUNDEEP
cssimagefirefoxresponsivesrcset
user2151345
user2151345

Reputation: 43

Responsive image scrset ignoring div width to show a larger image than necessary in Firefox

Just starting out with img srcset. I’m struggling to understand the behaviour with regards to showing images within a certain width dictated by the div.

Even though the css width is set to 1664px and a 1680 pixel image is available it is using the 3200 pixel version. The screen resolution is set to 1920 x 1200. The code seems to be ignoring the css and using the browser width (1920px).

Is there anything obviously wrong in the following code which could be causing this or is this the way srcset works?

<div style="width:1664px;">
    <a href="http://www.test.com">
        <img src="/images/1680-example-image.jpg"
             srcset="/images/0960-example-image.jpg 960w, 
             /images/1280-example-image.jpg 1280w, 
             /images/1680-example-image.jpg 1680w, 
             /images/3200-example-image.jpg 3200w" 
             sizes="100vw">
    </a>
</div>

Upvotes: 1

Views: 273

Answers (1)

Daniel Diekmeier
Daniel Diekmeier

Reputation: 3434

This is the correct (although a bit annoying) behaviour. The w values are always talking about the window size, not the size of the image container.

Upvotes: 2

Related Questions