响应式图像 srcset - 总是选择最大的图像

Question

我正在尝试使响应式图像正常工作，到目前为止我已经有了这个布局......

.container {
  display:flex;
  max-width:1000px
}

.col1 {
  flex:1;
  background:teal;
  text-align:center;
}

.col2 {
  flex:1;
  background:wheat;
  text-align:center;
}

.img-responsive {
max-width:100%;
height:auto;
}

<div class="container">

  <div class="col1">
    This is column 1
    <img
	class="img-responsive" 
	src="https://dummyimage.com/1000x1000/000/fff"

	srcset="https://dummyimage.com/1000x1000/000/fff 1000w,
			https://dummyimage.com/750x750/000/fff 750w,
			https://dummyimage.com/400x400/000/fff 400w"

	sizes="(max-width: 1000px) 1000px,
		   (max-width: 7500px) 750px,
		   (max-width: 400px) 400px,
	       1024px"
">
  </div>
  
  <div class="col2">
    This is column 2
  </div>

</div>

我期望在屏幕为 1000px 及以上时显示 1000px 图像，在 750px 及以上时显示 750px 版本等等......

但它只给我大版本，我哪里错了？

Answer 1

发生这种情况的原因有很多：

1. 您的浏览器可能已经缓存了较大版本的图像，因此使用它比访问网络获取新副本更有效。
2. 设备像素比 > 1.0，导致浏览器请求比预期分辨率更高的版本
3. 图像的显示宽度大于 srcset 中下一个最小的图像。

仔细检查后，您的示例中发生了一些奇怪的事情。

1. 您正在使用sizes，好像它是元素的媒体查询；但是，这些最小/最大宽度媒体查询的工作方式与它们在其他地方的工作方式相同，也就是说，它们适用于视口的大小，而不是元素。默认值为100vw，即视口的宽度。你可能需要像50vw.
2. sizes按顺序进行评估；将使用第一场比赛。在您的情况下，这(max-width: 1000px)对于视口 <= 1000px 来说是正确的。这意味着您要求浏览器加载最大的建议图像。
3. 使用max-width而不是min-width有点不寻常，尤其是在最大宽度和请求的图像大小之间的比例为 1:1 时。您会更常见地看到类似(min-width: 768px) 600px, 100vw，它告诉浏览器如果视口宽于 768 像素（我们的示例移动堆叠断点），则加载显示大小为 600 像素的图像，否则加载一个以全宽显示视口（这是100vw后备）。
4. 最后，您"在img标签的右括号之前有一个额外的双引号 ( ) ，但我不知道它是否会影响您的示例。