Question

我想创建一个使用图片标签的聚合物元素。

可悲的是，它没有按预期工作。媒体查询根本不起作用。
有没有人有这方面的经验？
我还尝试过分辨率媒体查询，因为我不确定该元素是否可以访问实际的视口，但只要设置<source>就会忽略<source media>。

实例：http://codepen.io/pixelass/pen/QwdBxX

<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.5.2/polymer.min.js"></script>
<polymer-element name="polymer-picture">
  <script>Polymer('polymer-picture',{});</script>
  <template>
    <picture>
      <source srcset="http://placehold.it/50" media="(max-width:399px)"/>
      <source srcset="http://placehold.it/80" media="(max-width:599px)"/>
      <source srcset="http://placehold.it/100" media="(max-width:799px)"/>
      <source srcset="http://placehold.it/150" media="(max-width:999px)"/>
      <source srcset="http://placehold.it/200"/><img alt="My default image"/>
    </picture>
  </template>
</polymer-element>
<h1>&lt;picture&gt; tag inside custom polymer-element breaks</h1>
<h2>Polymer element does not work</h2>
<polymer-picture></polymer-picture>
<h2>HTML5 element works</h2>
<picture>
  <source srcset="http://placehold.it/50" media="(max-width:399px)"/>
  <source srcset="http://placehold.it/80" media="(max-width:599px)"/>
  <source srcset="http://placehold.it/100" media="(max-width:799px)"/>
  <source srcset="http://placehold.it/150" media="(max-width:999px)"/>
  <source srcset="http://placehold.it/200"/><img alt="My default image"/>
</picture>

聚合物元素中的图片标签不起作用

0 个答案: