css – 仅在父元素上指定尺寸时继承尺寸

我使用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，可以随意游玩，看看它是否适合你。

http://jsfiddle.net/6afdbfck/

原文地址：https://www.jb51.cc/css/220177.html