Question

以下是代码段（also on JSFiddle）：

＆＃13;

<div>
  start
  <img src="http://www.baidu.com/img/bdlogo.png" style="border: 1px solid; height:1%;">
  end
</div>

＆＃13;

我将img的内联样式设置为height:1%并期望它变得更小，但是它的大小根本没有变化，至少在上面的演示中没有改变或者JsFiddle。

奇怪的是，当我完全复制相同的代码并将其保存到HTML文件中时，它可以正常工作，可以查看AT HERE

当代码段保存为HTML文件但在粘贴到在线编辑器时不起作用时，是否有人了解height:1%为什么有用的想法？

（似乎不同的原因是doctype，但我想知道在doctype未指定div并且<html>元素包含在<body>时将使用什么标准1}}也不img。据我了解，在块元素中设置{{1}}的高度根本不应该生效。）

Answer 1

使用百分比高度是棘手的 - 因为它需要是一定比例的东西。典型的外部div＆＃34;包装＆＃34;将定义总高度，内部div将是此百分比。当没有在任何地方定义特定高度时，浏览器会略微区别对待宽度不同，最常见的只是宽度客户端窗口，但高度有两种可能性 - 整个站点的高度或可视区域的高度。

在css3中你可以使用vh表示视图高度所以使用height =＆＃39; 1vh＆＃39;对于1％的可视区域，否则你必须给外部div一个定义的高度，以便内部div可以工作。

Answer 2

您必须为图像使用指定高度（以px或％或等）表示的父div。就像这样：

  <div style="height:100px;width:100%">
    start
    <img src="http://www.baidu.com/img/bdlogo.png" style="border: 1px solid; height:10%;">
    end
  </div>

通过这种方式，您可以确保此代码在每个浏览器中都能正常工作。

设置图像样式＆＃34;高度：1％＆＃34;有时工作，有时不起作用？

2 个答案: