0

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

我曾尝试给 :host 一个 display:block ，在无数其他尝试中使用样式进行此操作，包括确保容器为 100%，但没有任何效果。

这是我正在尝试使用最小图像显示聚合物制成的元素的代码笔，然后<picture>它自己的元素显示正确的图像。

请注意，在实时 codepen 版本中，<hr>由聚合物元素创建的（水平规则）元素是全宽，因此可以理解容器的正确宽度。

这是codepen中的代码：

```

<polymer-element name="picture-container" attributes="value">
  <template>
    <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>

  </template>
  <script>
    Polymer('picture-container');
  </script>
</polymer-element>

<picture-container></picture-container>

<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>

```

非常感谢您对此的任何帮助。

谢谢，斯科特

4

1 回答 1

0

更新

在图片填充 github 问题部分有一个正在运行的线程。该线程在脚本部分提供了一个新选项，使其在 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对图片元素的错误行为。

虽然还是没有解决...

于 2015-01-06T16:46:56.217 回答