在核心图像上设置自动尺寸会使其不呈现。

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

将宽度/高度设置为auto/percentage并不会导致它不呈现。它使它的大小为零。

1. sizing=的背后没有魔法，它是简单集的属性的core-image的主人。
2. 一旦设置完毕，它将强制core-image呈现另一个模板。这就是为什么不指定sizing似乎解决了一个问题。
3. 即使在现代浏览器中，自定义元素仍然有有限的支持。尽管如此，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

希望能帮上忙。