Why are these responsive images not filling the wrapper?

Question

I have a responsive image (srcset) that should be displayed at a max-width of 30rem, and fill the viewport otherwise. For that purpose I have the following html:

<div class="Wrapper">
  <img 
    src="//via.placeholder.com/250x150"           
    srcset="
      //via.placeholder.com/100x150 100w, 
      //via.placeholder.com/250x150 250w, 
      //via.placeholder.com/500x150 500w, 
      //via.placeholder.com/750x150 750w, 
      //via.placeholder.com/1000x150 1000w, 
      //via.placeholder.com/1250x150 1250w, 
      //via.placeholder.com/1500x150 1500w"
    sizes="(min-width: 30em) 30rem, 100vw"
  >  
</div>

With this css (there is more, but this is the minimum to reproduce):

html {
  font-size: 24px;
}

img {
  max-width: 100%;
}

.Wrapper {
  margin: 0 auto;
  max-width: 30rem;
  background: red;
}

On my monitor (macbook retina) the image is displayed like so:

So it isn't filling the viewport. Even though the measurements should be correct. I suspect that it has something to do with a difference in measurement between rem and em, but I'm not exactly sure what's going wrong. Why isn't the image filling the container?

Jsfiddle here: https://jsfiddle.net/Ly80zohd/2/

If you want to fill image you have to give `width:100%` to `img` tag but in that case image become stretch. — ankita patel, Nov 13 '17 at 09:24
Of course, but if it would load the correct width I wouldn't have to do that. So I'm wondering why it isn't loading the correct width. — , Nov 13 '17 at 09:25
If you remove the `sizes` attribute, do you get the effect you want? — sol, Nov 13 '17 at 09:39
what browser if i may ask? and also have a look at this -> https://stackoverflow.com/questions/28683635/is-there-something-wrong-with-my-srcset-definition-or-is-current-browser-suppor/28684171#28684171 — semuzaboi, Nov 13 '17 at 09:41
See [Device pixels vs. CSS pixels](https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html) — mch, Nov 13 '17 at 09:42
@ovokuro Is that valid? Having srcset without sizes? But yeah, it does respond exactly the way I want it to. — , Nov 13 '17 at 09:52
It is valid without it. The `sizes` attribute will be set to `100vw` by default — sol, Nov 13 '17 at 09:56
@ovokuro Ok, actually that isn't exactly what I want. It's filling the container, but since it's defaulting to 100vw the images are sometimes way too big. Sort of defeats the purpose. — , Nov 13 '17 at 14:42

score 0 · Answer 1 · answered Nov 13 '17 at 12:01

0

May it help, Just remove below code from HTML and check it

sizes="(min-width: 30em) 30rem, 100vw"

answered Nov 13 '17 at 12:01

pradeep.gour

31
1
6

It's not really an answer to my question. This doesn't answer the why. – Nov 13 '17 at 12:06

semuzaboi · Answer 2 · 2017-11-14T05:38:19.500

As far as the issue with image not filling the container is concerned, i reckon it is because of the media-queries specified in sizes attribute.

Changing the media queries to something solid, say px measurements.

sizes="(min-width: 376px) 80vw, 100vw"

gives the proper behaviour.

But one strange thing i noticed was irrespecitve of the font-size specified for html , the 30em breakpoint was considered as 480px , i think that is because of the 16px base font size for html tag in chrome.update above in OPs answer

Also , i'd say if we were to use srcset with w units , it is beneficial to give sizes as the browser will decide which item to pick from srcset based on the conditions defined in sizes .

If one was to use pixel density units i.e image-HD.jpeg 2x , then we can skip the sizes attribute.

Further reading in this excellent post about srcsets and sizes

There should be no difference between the em and rem measurements though, as I'm setting the font-size on the html element. Also, changing the sizes attr to `(min-width: 30rem) 30rem, 100vw` doesn't solve it either. So this answer still doesn't help me figure out why Chrome isn't downloading images that fill the wrapper, even though the syntax indicates that it should (the `sizes` attr is correct and the necessary image sizes are available). — , Nov 13 '17 at 13:15

score 0 · Accepted Answer · answered Nov 13 '17 at 14:59

0

So apparently:

When used in sizes or media queries, em and rem are both specced to mean "the user's default font-size.

The actual em or rem that controls how the image is laid out on the page can end up different if your CSS changes it

This means one should not change the default size of em if they want to give the image preloader truthful information

So the em and rem in the sizes attribute do not correspond to the em and rem in your css. Which is why the size of the image doesn't correspond to its container. Ridiculous.

See: https://stackoverflow.com/a/30675128/5918874

answered Nov 13 '17 at 14:59

so this solves "But one strange thing i noticed was irrespecitve of the font-size specified for html , the 30em breakpoint was considered as 480px , i think that is because of the 16px base font size for html tag in chrome. (...investigation in progress:) ) " which i had said before :) ! Ty :D – semuzaboi Nov 14 '17 at 05:35
@luciferous Yeah. It's so weird that they implemented it like this! – Nov 14 '17 at 09:11

Why are these responsive images not filling the wrapper?

3 Answers3