聚合物腹板组件内的picturefill元素丢失容器尺寸

Question

我正在尝试使用<picture>元素，它是由picturefill js library创建的，在我使用聚合物创建的web组件中，但它选择了尽可能小的图像，因为<picture>没有从容器元素中获得任何尺寸。

我曾尝试过在无数其他尝试中使用样式来实现这一点，包括确保容器是100%的，但都不起作用。

下面的codepen of what I'm trying to do使用最小的图像显示了聚合物制成的元素，然后<picture>元素本身显示了正确的图像。

请注意，在实时代码版本中，由聚合物元素创建的<hr> (水平线)元素是全宽的，因此可以理解容器的正确宽度。

这是代码中的代码：

```javascript

<style>

  :host {

  display: block;

    border: 1px solid #000;

    padding: 1em;

  }

</style>

<hr>

  <h2>Picture In Polymer Element</h2>

  <picture>

    <source srcset="http://www.placecage.com/c/500/500" media="(min-width: 500px)">

    <source srcset="http://www.placecage.com/c/200/200" media="(min-width: 400px)">

    <img srcset="http://www.placecage.com/c/100/100" alt="An example of the picture element">

  </picture>

<hr>

Polymer('picture-container');

<source srcset="http://www.placecage.com/c/500/500" media="(min-width: 500px)">

<source srcset="http://www.placecage.com/c/200/200" media="(min-width: 400px)">

<img srcset="http://www.placecage.com/c/100/100" alt="An example of the picture element">

在这方面的任何帮助都非常感谢。

谢谢，斯科特

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

我发现在火狐(33.03)中，如果我进入about:config并将这两个设置更改为true：dom.image.srcset.enabled dom.image.picture.enabled，那么这将模仿图片元素使用chrome的不正确行为。

但是仍然没有解决方案。