Question

我有一个响应式图像（srcset），应该以最大宽度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，我认为这是因为html标签的16px基本字体大小在Chrome中。在OPs回答中更新

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

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

进一步阅读excellent post about srcsets and sizes

Answer 3

显然：

在sizes或媒体查询中使用时，em和rem都被视为＆＃34;用户的默认font-size。

如果CSS更改了图片，那么控制图片在页面上的布局方式的实际em或rem可能会有所不同

这意味着，如果他们想要为图片预加载器提供真实信息，则不会更改em的默认大小

因此sizes属性中的em和rem与css中的em和rem不对应。这就是为什么图像的大小与其容器不对应的原因。可笑了。

请参阅：https://stackoverflow.com/a/30675128/5918874

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

3 个答案: