我的页面中有一个核心图像组件,我正在调整它以适应它所在的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"
会解决此问题,但我正在使用它的功能。
我做错了什么,或者我该如何根据宽度启用动态高度?
答案 0 :(得分:2)
将宽度/高度设置为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
希望它有所帮助。