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

时间:2015-03-07 00:42:34

标签: html css polymer core-image web-component

我的页面中有一个核心图像组件,我正在调整它以适应它所在的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"会解决此问题,但我正在使用它的功能。

我做错了什么,或者我该如何根据宽度启用动态高度?

1 个答案:

答案 0 :(得分:2)

将宽度/高度设置为auto /百分比不会导致不渲染。它导致它的大小为零。

  1. sizing=背后没有任何魔法,simply sets core-image主持人的background-size property

  2. 设置后,会强制core-image呈现another template这就是为什么不指定sizing似乎可以解决问题。

  3. 即使在现代浏览器中,自定义元素仍然受到有限的支持。也就是说,宽度/高度的auto正在起作用......并不总是如预期的那样(至少根据我的经验)。

  4. 但是,有可能将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

    希望它有所帮助。