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

Question

size 需要和 srcset 一起使用吗？我有一个网站，除了一个 50 像素的板之外，它几乎全屏显示大图像。此图像的比例不需要根据不同的屏幕比例/尺寸而改变。

目前我只使用 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"，意思是“视口(viewport)的宽度”，这是一个明智的默认值，因为图像可能不会显示得比这更大，所以在最坏的情况下，图像被加载其分辨率太大(总比太小好)。

sizes - 属性因此在您对不跨越整个视口(viewport)宽度的图像使用流体布局时有意义，可能取决于断点。例如，sizes="(min-width: 900px) 33.3vw, 100vw" 表示当浏览器视口(viewport)大于 900px(或 450px 和2dpi 视网膜屏幕等)。

您可以找到一篇关于数学细节的好文章 here .

在您的情况下，sizes 没有帮助(尽管您可以编写 sizes="calc(100vw - 100px)"。重新-下载更大的分辨率是浏览器需要决定的事情，每个浏览器的实现方式可能不同。Chrome 目前这样做(但它不会相反，一旦下载高分辨率，较低的分辨率就会被忽略，因为 '没有必要')。