Question

我有一个HTML代码，我试图用百分比来改变高度。但它不起作用，我从三个不同的标签获得相同的大小。

这是代码：

<img src="smiley.gif" alt="Smiley face" style="width:40%; height:60%">

<img src="smiley.gif" alt="Smiley face" style="width:40%; height:10%">

<img src="smiley.gif" alt="Smiley face" style="width:40%; height:20%">

Answer 1

如果您在height属性中使用百分比值，则会根据其包含块的高度进行计算。

但是，如果其包含块的高度取决于内容，则它将是循环引用。

因此，在这种情况下，百分比计算为auto。

这在规范中解释：

10.5 Content height: the 'height' property

<强>＆LT;百分比＆GT;

指定百分比高度。百分比用计算   尊重生成的框containing block的高度。如果   未明确指定包含块的高度（即，它   取决于内容高度），这个元素不是绝对的   定位后，该值计算为'auto'。

然后，您可以修复它为包含块设置显式高度。

div {
  height: 200px; /* explicit height */
  outline: 1px solid red;
}
img {
  display: block;
  outline: 1px solid blue;
  width: 40%;
  height: 10%;
}
img:first-child {
  height: 60%;
}
img:last-child {
  height: 20%;
}

<div>
  <img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico" alt="Favicon">
  <img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico" alt="Favicon">
  <img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico" alt="Favicon">
</div>

Answer 2

图像是内联元素，其中高度由行高和内联框设置。要执行您显示的操作，您需要使元素块级别或内联块，其中height属性可以生效。

为什么高度百分比无效？

2 个答案: