HTML scrset属性加载错误的图像

Question

我在使用scrset加载正确的响应图像时遇到了问题。

我使用的是以下size属性：

sizes="(max-width: 767px) 95vw, 768px"

和下面的scrset属性：

srcset="https://cdn.runningshoesguru.com/wp-content/uploads/2018/07/Nike-Pegaus-35-Turbo-photo-9.jpg 1280w, https://cdn.runningshoesguru.com/wp-content/uploads/2018/07/Nike-Pegaus-35-Turbo-photo-9-300x225.jpg 300w, https://cdn.runningshoesguru.com/wp-content/uploads/2018/07/Nike-Pegaus-35-Turbo-photo-9-768x575.jpg 768w, https://cdn.runningshoesguru.com/wp-content/uploads/2018/07/Nike-Pegaus-35-Turbo-photo-9-633x474.jpg 633w"

所以我希望768px的版本可以在桌面上加载，但是全尺寸的版本总是加载的。

你可以在这里看到完整的html/css：

https://output.jsbin.com/nelikarewu

我做错了什么吗？

谢谢!

Answer 1

将此行sizes="(max-width: 767px) 95vw, 768px"更改为sizes="(max-width: 767px) 95px, 768px"