`size`是否需要与`srcset`一起使用，有哪些优缺点？(Does `size` need to be used with `srcset`, what are the pros / cons?

`size`是否需要与`srcset`一起使用，有哪些优缺点？(Does `size` need to be used with `srcset`, what are the pros / cons?)

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

目前我正在使用像这样的srcset ：

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

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

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

Does size need to be used with srcset ? Ive got a site that has a large image pretty much full screen apart from a 50px board all the way round. The proportion of this image dosnt need to change depending upon different screen proportions / sizes.

At the moment im using just srcset like this :

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

The issue with this is that if a user is on a desktop opens up the site in a compressed browser (so the small image will be loaded) then makes their browser window bigger, the small image will just be scaled so it will now be pixilated. (If they refreshed the page they would now get the large or medium image, but i doubt any one would refresh the page after every resize of a browser window)

By using the size attribute would it then try are recalculate which image to use if the browser window is resized ? If not what is the use case for the size attribute ?

最满意答案

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目前确实如此（但是它不会反过来，一旦下载高分辨率，较低的分辨率将被忽略为“不必要”）。

The sizes-Attribute (note the s) can help the browser decide which resolution to load. At the time of choosing the resolution, the CSS might not be rendered yet, so we need to duplicate this information.

It declares to the browser which space the image will have in the layout. It defaults to "100vw" which means "the width of the viewport", which is a sane default because the image probably will not be shown bigger than that, so in the worst case, an image is loaded whose resolution is too big (better than too small).

The sizes-Attribute thus makes sense when you use a fluid layout with images that do not span over the whole viewport width, probably depending on breakpoints. For example, sizes="(min-width: 900px) 33.3vw, 100vw" would mean that the image is in a 3-column-layout when the browser viewport is bigger than 900px (or 450px and a 2dpi-Retina-Screen, etc.).

You can find a great article about the math details here.

In your case, sizes doesn't help (although you could write sizes="calc(100vw - 100px)". Re-downloading a bigger resolution is something the browser needs to decide, and this might be implemented differently by each browser. Chrome currently does (however it does not do the inverse, as soon as a high resolution is downloaded the lower resolutions are ignored as 'not necessary').