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 /百分比不会导致不渲染。它导致它的大小为零。

sizing=背后没有任何魔法，simply sets core-image主持人的background-size property。
设置后，会强制core-image呈现another template。 这就是为什么不指定sizing似乎可以解决问题。
即使在现代浏览器中，自定义元素仍然受到有限的支持。也就是说，宽度/高度的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上设置自动尺寸会导致无法渲染

1 个答案: