我正在尝试使用由picturefill js library创建的<picture>
元素,在我正在使用Polymer创建的Web组件中,但它选择的最小图像为{ {1}}未从容器元素获取任何维度。
我试过给:主持一个显示:阻止其中有很多其他尝试使用样式进行此操作,包括确保容器是100%,但没有任何效果。
这是codepen of what I'm trying to do使用最小的图像显示聚合物制造的元素,然后它自己的<picture>
元素显示正确的图像。
请注意,在live codepen版本中,由polymer-element创建的<picture>
(水平规则)元素是全宽,因此了解容器的正确宽度。
这是codepen中的代码:
```
<hr>
```
对此的任何帮助都非常感激。
感谢, 斯科特
答案 0 :(得分:0)
有一个running thread on this on the picturefill github issues section。该线程在脚本部分提供了一个新选项,使其在Firefox和Safari中正常工作:
<script>
Polymer('picture-container',{
ready: function() {
picturefill({elements: this.shadowRoot.getElementsByTagName('img')});
}
});
</script>
示例代码:http://codepen.io/scottnath/pen/Wboayg
我在Firefox(33.03)中发现,如果我进入about:config
并将这两个设置更改为true:
dom.image.srcset.enabled
dom.image.picture.enabled
然后,这模仿了图片元素的不正确的chrome行为。
虽然仍然没有解决方案......