size是否需要与srcset一起使用，优点/缺点是什么？

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-Attribute（注意S）可以帮助浏览器决定哪些决议负荷。在选择分辨率时，CSS可能尚未呈现，因此我们需要复制此信息。

它向浏览器声明图像在布局中将具有的空间。它的默认值"100vw"表示“视口的宽度”，这是一个合理的默认值，因为图像可能不会显示得比该尺寸大，因此在最坏的情况下，加载的图像的分辨率太大（好于太小） ）。

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

您可以在此处找到有关数学细节的精彩文章。

在您的情况下，sizes这无济于事（尽管您可以编写sizes="calc(100vw - 100px)"。重新下载更大的分辨率是浏览器需要决定的事情，并且每种浏览器可能会以不同的方式实现。Chrome当前可以（但是，反之则不行，一旦下载了高分辨率，则将较低的分辨率视为“不必要”而被忽略）。