我使用web组件polyfill开发一个API的自定义元素，我打了一个钩。
元素之一可以包含< img>或< canvas>元件。如果没有为自定义元素指定尺寸，那么它应该是子元素的默认尺寸。如果指定了一个或多个维度，它们应该由子元素继承。
对于我的第一个努力，我认为CSS继承的价值将是足够好：
my-el img,my-el canvas {
width: inherit;
height: inherit;
max-width: inherit;
min-width: inherit;
max-height: inherit;
min-height: inherit;
}
但是，当将百分比应用于< my-el>的宽度或高度时，此操作无效。相反，子元素takes up the same percentage of its parent。
我已经尝试过各种其他尝试的解决方案，搜索远，广泛无济于事。我认为一个纯CSS解决方案可能是不可能的，但我希望有人可以证明其他。
为了澄清，最终结果应该是< my-el>表现为内联替换的元素本身，好像它是< img>有自己的内部尺寸。当您不在这些元素上设置宽度或高度时，它们默认为其内部尺寸。当您设置宽度或高度时，它优先，任何“内部”内容相应地调整大小。 (至少，我希望澄清！)
解决方法
百分比宽度和高度是相对于父元素，所以你可能只是使用这个我想。
my-el {
display: inline-block;
}
my-el img,my-el canvas {
width: 100%;
height: 100%;
}
通过设置任何宽度和高度到my-el，可以随意游玩，看看它是否适合你。
