Question

我正在使用网络组件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>具有自己的内部维度。如果您未在这些元素上设置宽度或高度，则默认为其内部尺寸。设置宽度或高度时，优先级和任何＆＃34;内部＆＃34;内容相应调整大小。 _{（至少，我希望澄清！）}

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%;
 }

fiddle

Answer 2

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

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

可以通过将任何宽度和高度设置为my-el来随意玩耍，看看它是否适合您。

http://jsfiddle.net/6afdbfck/

Answer 3

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

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%;
 }

Answer 4

我想我不明白这个问题。如果你能够在img / canvas上设置内联样式，那么你应该使用宽度/高度进行排序：100％，因为它们将被内联样式覆盖。

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

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

object Book {
  def main( argv : Array[String] ) : Unit = {
    val books: List[Book] = List( 
      Book("Interpretarea programelor pe calculator", List("Grigore, Alexe", "Antonio, Vucu G.")), 
      Book("Calcul diferential si integral", List("Andrei, Ioan", "Anghel, Radulescu")), 
      Book("Introducere in limbajul de programare C++", List("Andrei, Nicolae")),
      Book("Introducere in programarea functionala", List("Dinu, Constantin")), 
      Book("Programare in limbajul Java", List("Daniel, Iosif", "Gicu, Alin", "Victor, Niculescu ", "Viorel, Andurache"))
    )

    val res1 = for (b <- books; a <- b.authors if a startsWith "Andrei") yield    b.title
    val res2 = for (b <- books if (b.title indexOf "programare") >= 0) yield b.title

    println(res1);
    println(res2);
  }
}
case class Book(title: String, authors: List[String])

Answer 5

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

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/ 在这种情况下，如果您想保持纵横比，则必须查询图像的naturalWidth和naturalHeight并自行计算以保持纵横比。

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 {}的边框。如果您有任何疑问，请告诉我。

仅在父元素

6 个答案: