为什么这些响应式图像没有填满包装纸？

Question

我有一个响应图像 (srcset) 应该显示在 max-width 30rem，否则填充视口。为此，我有以下 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）上图像显示如下：

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

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

Answer 1

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

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

Answer 2

就图像未填满容器的问题而言，我认为这是因为 sizes 属性中指定的媒体查询。

将媒体查询更改为可靠的东西，比如 px 测量值。

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

给出正确的行为。

但是我注意到一件奇怪的事情是不管为 html 指定的字体大小，30em 断点被认为是 480px ，我认为这是因为 16px chrome 中 html 标签的基本字体大小。 在 OPs answer

中更新以上

此外，我想说的是，如果我们要使用 srcset 和 w 单位，则提供 sizes 是有益的，因为浏览器将决定从 srcset 中选择哪个项目基于 sizes 中定义的条件。

如果要使用像素密度单位，即 image-HD.jpeg 2x ，那么我们可以跳过 sizes 属性。

进一步阅读 excellent post about srcsets and sizes

Answer 3

显然：

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

所以sizes属性中的em和rem与你的css中的em和rem不对应。这就是图像大小与其容器不对应的原因。可笑。

参见：

为什么这些响应式图像没有填满包装纸？

Why are these responsive images not filling the wrapper?

html

css

srcset

responsive-images