Question

我正在尝试使用由picturefill js library创建的<picture>元素，在我正在使用Polymer创建的Web组件中，但它选择的最小图像为{ {1}}未从容器元素获取任何维度。

我试过给：主持一个显示：阻止其中有很多其他尝试使用样式进行此操作，包括确保容器是100％，但没有任何效果。

这是codepen of what I'm trying to do使用最小的图像显示聚合物制造的元素，然后它自己的<picture>元素显示正确的图像。

请注意，在live codepen版本中，由polymer-element创建的<picture>（水平规则）元素是全宽，因此了解容器的正确宽度。

这是codepen中的代码：

```

<hr>

```

对此的任何帮助都非常感激。

感谢，斯科特

Answer 1

更新

有一个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行为。

虽然仍然没有解决方案......

聚合物纤维网组件内的填充元件会损失容器尺寸

1 个答案:

更新