srcset 和尺寸总是下载最大的

Question

这是代码

<img class="rounded-full w-[60px] h-[60px] sm:w-[65px] sm:h-[65px]" srcset="1.jpg 60w, 2.jpg 65w, https://cdn.com/s/files/3.jpg 1000w, 4.jpg 2500w" sizes="(max-width: 511px) 60w, 65w">

我希望它下载

2.jpg

，但它却下载

4.jpg

。不过，

4.jpg

为什么我把

2500vw

放入

65w

时却下载了

sizes

。我正在检查的视口是

1500px

。

Answer 1

您不应使用

w

作为

sizes

中的单位。

正确语法：

<img class="rounded-full w-[60px] h-[60px] sm:w-[65px] sm:h-[65px]" 
srcset="1.jpg 60w, 2.jpg 65w, https://cdn.com/s/files/3.jpg 1000w, 4.jpg 2500w" 
sizes="(max-width: 511px) 60px, 65px">