html - 为什么这些响应式图像没有填满 wrapper ？

Question

我有一个响应式图像 (srcset)，它应该以 30rem 的最大宽度显示，否则填充视口(viewport)。为此，我有以下 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>

有了这个 css(还有更多，但这是最低限度的重现):

html {
  font-size: 24px;
}

img {
  max-width: 100%;
}

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

在我的显示器(macbook retina)上图像显示如下:

所以它没有填满视口(viewport)。即使测量应该是正确的。我怀疑这与 rem 和 em 之间的测量差异有关，但我不确定到底出了什么问题。为什么图像没有填满容器？

Jsfiddle 在这里:https://jsfiddle.net/Ly80zohd/2/

Answer 1

可能有帮助，只需从 HTML 中删除以下代码并进行检查

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