我在Chrome 40.0.2214.91中看到与img标签(响应图像)上的srcset属性有很多不一致
在我更新到Chrome v40(我在~39之前)之前,srcset属性工作正常,并会在浏览器调整大小时交换图像.现在,有时,如果我将浏览器设置为所需宽度,则会显示较小版本的图像,然后刷新页面.其他时候它将无法正常工作.
测试jsbin:http://jsbin.com/hulaconake/1/edit？html,output
图像标签我有:
<img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w">
我也在使用nonPlacehold.it图像在另一个环境中测试它,并使用Picturefill.js http://scottjehl.github.io/picturefill/
我在FF或Safari中都没有任何问题(都使用图片填充).
iOS Chrome也有类似的问题.
我的语法错了吗？有什么事情我不知道吗？
我正在处理具有以下标记的页面:
<img
alt=""
src="/banner_home.300x200.jpg"
srcset="/banner_home.300x200.jpg 320w,
/banner_home.600x400.jpg 480w,
/banner_home.728x242.jpg 768w,
/banner_home.920x306.jpg 960w,
/banner_home.1234x400.jpg 1280w">
而且似乎在最新的Chrome和Opera中,他们忽略了屏幕大小,只输出最后列出的文件(所以我的情况下是1234x400.jpg).
使用Picturefill,Firefox和Safari都可以在较小的屏幕上显示正确的图像.
在我今天的测试中,我推出了Opera,我暂时没有打开.它首次推出时是在v25,它会在较小的屏幕尺寸下显示正确的图像.
然后我注意到已经下载了更新,所以我运行它,更新到v27,然后Opera显示与最新Chrome相同的问题.
所以似乎Blink最近发生了一些变化.
任何人都可以证实这一点,或者我只是做错了吗？
Codepen来说明我的意思.
我正在我的页面上进行优化,这一切都很顺利,因为我想出了一个实现srcset和sizes属性的想法<img>.我使用新的缩放图像(额外的1200w,大型992w,中型786w,小型576w,extra_small-320w)创建php构造img对象和填充srcset属性的函数和通用(尽可能多的可用)sizes属性(下面的示例) .当开始使用杂发生启动问题引导网格系统对于不同的vw(视图宽度),例如col-lg-4 col-md-6.我尝试了很多不同的版本,sizes但它似乎没有工作,除了一个:
sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 100vw"
这是有效的,但对于一个网格 - 在这个例子.333中是col-4.(12em是sidenav宽度).
但是对于多个网格,我尝试了这个:
sizes="(max-width: 575.98px) 100vw,
((min-width: 576px) and (max-width: 767.98px)) 100vw,
((min-width: 768px) and (max-width: 991.98px)) calc(.5 * 100vw),
((min-width: 992px) and (max-width: 1199.98px)) calc(.333 * 100vw),
((min-width: 1200px) and (max-width: 1440.98px)) calc(.333 * 100vw),
(min-width: 1441px) calc(.333 * …