在 core-image 上设置自动尺寸会导致它不渲染

Question

我的页面中有一个核心图像组件，我正在调整其大小以适应它所在 div 的宽度。

<div class="content">

  <core-image class="sized gray" sizing="contain" 
              preload fade src="Koala.jpg">
  </core-image>

</div>

用绝对尺寸调整大小就可以了，例如

.sized {
  width: 200px;
  height: 200px;
}

但是，使用自动或 100% 高度调整大小会导致它无法呈现，

.sized {
  width: 200px;
  height: auto;
}

删除 sizing="contain" 在一定程度上解决了这个问题，但我正在使用它的功能。

我哪里做错了，或者我该怎么做才能根据宽度启用动态高度？

Answer 1

将 width/height 设置为 auto/percentage 不会导致它不呈现。它使它的大小为零。

sizing=背后没有魔法，它是core-image主机的simply sets the background-size property。
设置后，它会强制 core-image 呈现 another template。 这就是为什么不指定 sizing 似乎可以解决问题。
即使在现代浏览器中，自定义元素的支持仍然有限。也就是说，width/height 的 auto 正在工作，呃……并不总是像预期的那样（至少根据我的经验）。

虽然可以将 w/h 设置为百分比值。为此，应该明确设置嵌套容器的大小：

  <template>
    <style>
      .content { width: 200px; height: 200px; }
      .sized {
        background-color: lightgray;
        width: 100%;
        height: 100%;
      }
    </style>
    <div class="content">
      <core-image class="sized gray" sizing="contain" 
                  preload fade src="Koala.jpg">
      </core-image>
    </div>
  </template>

实时预览：http://plnkr.co/edit/7NhNwq6IgigBmiRhI58V?p=preview

希望对您有所帮助。

在 core-image 上设置自动尺寸会导致它不渲染

Setting auto dimension on core-image causes it not to render

html

css

core-image

web-component

polymer