Question

size需要使用srcset吗？我有一个网站，除了一个50px的电路板外，还有一个非常全屏的大图像。该图像剂量的比例需要根据不同的屏幕比例/大小而改变。

目前我只使用srcset这样：

<img 
src="bath.jpg"
srcset="bath-large.jpg 1500w, bath-medium.jpg 1000w, bath-small.jpg 600w"
alt="#"
>

这个问题是，如果桌面上的用户在压缩浏览器中打开网站（因此将加载小图像）然后使他们的浏览器窗口变大，小图像将被缩放以便它将现在是像素化的。（如果他们刷新了页面，他们现在可以获得大图像或中图像，但我怀疑任何人都会在每次调整浏览器窗口大小后刷新页面）

使用size属性然后尝试重新计算在调整浏览器窗口大小时使用哪个图像？如果不是size属性的用例是什么？

Answer 1

sizes - 属性（注意s）可以帮助浏览器决定加载哪个分辨率。在选择分辨率时，CSS可能尚未呈现，因此我们需要复制此信息。

它向浏览器声明图像在布局中将具有哪个空间。它默认为"100vw"，这意味着“视口的宽度”，这是一个理智的默认值，因为图像可能不会显示大于那个，所以在最坏的情况下，加载的图像分辨率太大（好于太小）。

sizes - 属性因此在使用不包含整个视口宽度的图像的流体布局时很有意义，可能取决于断点。例如，sizes="(min-width: 900px) 33.3vw, 100vw"表示当浏览器视口大于900px（或450px和2dpi-Retina-Screen等）时，图像采用3列布局。

您可以找到一篇关于数学详情here的精彩文章。

在你的情况下，sizes没有帮助（虽然你可以写sizes="calc(100vw - 100px)"。重新下载更大的分辨率是浏览器需要决定的，这个可能会被每个浏览器以不同的方式实现。目前Chrome可以实现（但不会反过来，只要下载高分辨率，较低的分辨率将被忽略为“不必要”）。

Answer 2

您在srcset中指定的大小适用于图像响应的情况，换句话说，当图像没有固定时。

如果调整图像大小，支持srcset的浏览器将尝试从srcset中找到最适合的源图像。