我一直在尝试使用以下HTML实现响应式图像的新srcset方法
<img class="swapImages"
srcset="assets/images/content/large.jpg 1200w,
assets/images/content/medium.jpg 800w,
assets/images/content/small.jpg 400w"
sizes="100vw"
src="assets/images/content/small.jpg"
alt="responsive image">
我使用chrome 40,我得到的是最大的图像,调整我的浏览器大小,清除缓存什么都不做.
我读到了我必须填充的地方,所以我使用了picturefill插件,虽然chrome应该支持它.....仍然不起作用.
我为它准备了一个演示页面:http: //www.darrencousins.com/lab/resp-img-srcset/
我做错了什么/没有得到什么？
任何帮助都非常受欢迎.
所以我有这个代码:
<html>
<head>
</head>
<body>
<img src="small.jpg" srcset="https://media.kulturbanause.de/blog/2014/09/responsive-images/small.jpg 320w, https://media.kulturbanause.de/blog/2014/09/responsive-images/medium.jpg 600w, https://media.kulturbanause.de/blog/2014/09/responsive-images/large.jpg 900w" alt="">
</html>根据代码,应该为不同的视口大小加载不同的图像.但是,当我在手机上运行此代码时,即使320w(视口宽度)仍然显示large.jpg,应该加载小的.