我正在尝试根据设备宽度提供响应式/自适应图像。
原图:
<img src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"/>
使用 Srcset:
<img
src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
srcset="
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400 400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800 800w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
"
/>
我面临两个问题:
1) 即使在较小的设备(如 iPhone 6s)上，也会加载宽度为 2000px 的图像(它应该加载 800px 图像)。
2) 我将两个图像(有和没有 srcset)放在一起。他们都加载了具有相同尺寸的图像。但是，与其他相比，带有 srcset 的那个显得很小。由于html/css中没有指定宽度，所以它应该以实际图像的宽度呈现，对吧？这是 fiddle :https://jsfiddle.net/hfcbatdn/
最佳答案
与 srcset attribute你必须提供 sizes attribute制作响应图像。改成这样。
<img
src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
srcset="
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400 400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800 800w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
"
/>
到
<img
src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
srcset="
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400 400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800 800w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
"
sizes="(max-width: 991px) 480px,(max-width: 1024px) 800px,(max-width: 1920px) 1400px,(max-width: 2560px) 2000px,3800px"
/>
更改 sizes属性 max-width=?你的愿望@media询问。您还必须添加 meta view port里面<head></head>标签。 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> .
更多详情请参见 Responsive Images .
关于html - Srcset 渲染图像大小错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59480664/