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

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> 的宽度或高度时，这不起作用。相反，子元素 takes up the same percentage of its parent.

我已经尝试了各种其他解决方案尝试并广泛搜索但无济于事。我认为纯粹的 CSS 解决方案可能是不可能的，但我希望有人能证明不是这样。

澄清一下， 最终结果应该是 <my-el> 表现得像一个行内替换元素本身，就好像它是一个 <img>自己的内部维度。当您不在这些元素上设置宽度或高度时，它们默认为其内部尺寸。当您设置宽度或高度时，它会优先并且任何 "internal" 内容都会相应地调整大小。 _{（至少，我希望澄清！）}

Answer 1

除非我完全误解了您的要求，否则您只需要：

my-el {display: inline-block;}

要确保子元素采用父元素的属性，请使用：

my-el > img,
my-el > canvas {
    height: auto;
    max-width: 100%;
    width: 100%;
}

FWIW，最好将 class 添加到您的元素，作为一个钩子，并将您的样式附加到它而不是直接定位元素，例如：

<myelement class="my-el"><img></myelement>

.my-el {display: inline-block;}

.my-el > img,
.my-el > canvas {
    height: auto;
    max-width: 100%;
    width: 100%;
 }

如果您希望这些样式应用于父元素的任何直接子元素，则只需使用通用选择器：

.my-el > * {
    height: auto;
    max-width: 100%;
    width: 100%;
 }

Answer 2

我想我不明白这个问题。如果您能够在 img/canvas 上设置内联样式，那么您应该使用 width/height: 100% 进行排序，因为这些将被内联样式覆盖。

我包含了一个 JSFiddle，我在其中一个元素上设置了内联样式，另外两个元素采用了父元素。

http://jsfiddle.net/6vygke92/5/

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

Answer 3

您可以使用 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%;
 }

fiddle

Answer 4

您的客户如何设置自定义元素的宽度或高度？无论如何，你可以这样做：

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

它说 img/canvas 与它们的默认值一样宽，但不能比它们的父项宽。图片将保持其纵横比，在下方或右侧留空 space，如您在此 fiddle http://jsfiddle.net/vendruscolo/yrvfz1fw/9/

中所见

如果您希望拉伸图像以填充可用空间space，您可以改用此

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

只要您使用百分比或更小的宽度来调整元素的大小，就可以了。当您使用像素设置明确的（更大的）宽度时，图像将停止以保持其纵横比，如您所见 http://jsfiddle.net/vendruscolo/zz6gnytt/2/ 在这种情况下，如果您想保持纵横比，则必须查询图像的 naturalWidth 和 naturalHeight 并自行计算以保持纵横比。

Answer 5

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

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

随意将任何宽度和高度设置为 my-el，看看它是否适合您。

http://jsfiddle.net/6afdbfck/

Answer 6

我希望这次我的代码能正常工作

my-el {
    width: 50%;
    border: 1px solid silver;
}

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

<my-el>
  <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png" />
</my-el>

或其他方法

my-el {
  width: 50%;
  border: 1px solid silver;
}
my-el img,
my-el canvas {
  width: inherit;
  height: inherit;
  max-width: inherit;
  min-width: inherit;
  max-height: inherit;
  min-height: inherit;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}

<my-el>
  <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png" />
</my-el>

我希望这次能以一种简单的方法和更少的代码并与所有浏览器兼容以及响应式帮助您，而且它非常完美并且不显示 my-el {} 的边框。如果您有任何问题，请告诉我。

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

Inheriting dimensions only if they are specified on the parent element

css

web-component

custom-element