HTML scrset属性加载错误的图像

时间:2018-08-21 04:18:32

标签: html5 css3 responsive-design responsive srcset

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

我正在使用以下sizes属性:

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

我做错什么了吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

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