26

我正在使用 Web 组件 polyfill 为 API 开发一堆自定义元素，但遇到了障碍。

其中一个元素可以包含一个<img>或<canvas>元素。如果没有为自定义元素指定尺寸，它应该是子元素的默认尺寸。如果指定了一个或多个维度，它们应该由子元素继承。

对于我的第一次尝试，我认为 CSSinherit值就足够了：

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>具有自己的内部尺寸一样。当您没有在这些元素上设置宽度或高度时，它们默认为其内部尺寸。当您确实设置宽度或高度时，它优先，并且任何“内部”内容都会相应地调整大小。 （至少，我希望澄清！）

4

6 回答 6

7

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

小提琴

于 2015-06-15T09:03:02.433 回答
6

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

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

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

http://jsfiddle.net/6afdbfck/

于 2015-06-18T16:01:31.210 回答
2

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

my-el {display: inline-block;}

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

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

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

<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%;
 }
于 2015-06-15T08:07:21.807 回答
0

我想我不明白这个问题。如果您能够在 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;
}
于 2015-06-15T08:32:18.570 回答
0

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

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

它说img/canvas与它们的默认值一样宽，但不比它们的父级宽。图像将保持它们的纵横比，在它们下方或右侧留下空白空间，如您在此小提琴http://jsfiddle.net/vendruscolo/yrvfz1fw/9/中所见

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

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

只要您使用百分比或较小宽度调整元素大小，就可以了。当您使用像素设置显式（更大）宽度时，图像将停止以保持其纵横比，如您所见http://jsfiddle.net/vendruscolo/zz6gnytt/2/ 在这种情况下，如果您想保持纵横比ratio 您必须查询图像的naturalWidthandnaturalHeight并进行自己的数学运算以保持纵横比。

于 2015-06-15T09:10:48.983 回答
0

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

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 {}. 如果您有任何问题，请告诉我。

于 2015-06-22T02:51:25.957 回答