仅在父元素上指定维度时继承维度

Question

我正在使用Web组件polyfill为API开发一堆自定义元素,我遇到了麻烦.

其中一个元素可能包含一个<img>或一个<canvas>元素.如果没有为自定义元素指定维度,则它应该是子元素的默认大小.如果指定了一个或多个维度,则它们应由子元素继承.

对于我的第一次努力,我认为CSS inherit值足够好:

my-el img, my-el canvas {
    width: inherit;
    height: inherit;
    max-width: inherit;
    min-width: inherit;
    max-height: inherit;
    min-height: inherit;
}

但是,当百分比应用于宽度或高度时,这不起作用<my-el>.相反,子元素占用其父元素的相同百分比.

我已经尝试了各种其他尝试解决方案,并且搜索得无处可寻.我认为一个纯粹的CSS解决方案可能是不可能的,但我希望有人可以证明不是这样.

为了澄清,最终结果应该是<my-el>行为类似于内联替换元素本身,就像它<img>具有自己的内部维度一样.如果未在这些元素上设置宽度或高度,则默认为其内部尺寸.设置宽度或高度时,优先级和任何"内部"内容都会相应调整大小. _{(至少,我希望澄清!)}

Answer 1

您可以使用min-width:100%- min-height:100%作为为父div分配百分比宽度的情况的后备:

 my-el img, my-el canvas {
   width: inherit;
   height: inherit;
   max-width: inherit;
   min-width:100%;
   max-height: inherit;
   min-height: 100%;
 }

小提琴

Answer 2

宽度和高度的百分比是相对于父元素的,所以你可能只想使用它.

my-el {
    display: inline-block;
}
my-el img, my-el canvas {
    width: 100%;
    height: 100%;
}

您可以通过设置任何宽度和高度来自由玩耍my-el,看看它是否适合您.

http://jsfiddle.net/6afdbfck/