html - CSS 使用 em 单位。 div 父元素中图像的一半大小

Question

我有一张图片，用作 div 中 html 标记 img 中的源。使用 em 大小单位，我想将我的图像调整为他父 div 框的一半。所以我将 img 的两个 CSS 属性 width 和 height 的值设置为 0.5em。

但是正如您在下面的代码中看到的，结果并不如预期!

<div>
   <img src=''>
</div>

html {
   font-size:16px;    
}

div {
   width: 20em;
   height: 20em;
   border: 1px solid red;
}

img {
   border: 1px solid green;
   width: 0.5em;
   height: 0.5em;
}

fiddle :http://jsfiddle.net/framj00/pz27X/1/

你能帮我解决一下吗？

Answer 1

em用于比例测量。如果你使用 em它将基于根字体大小，即 html { font-size: 16px; } .所以width: 0.5em; height: 0.5em实际上是 8px。

如果你希望图像是父级尺寸的 50% <div>你不能使用 em对于测量，您需要使用 % :

img {
  border: 1px solid green;
  width: 50%; /* width: 0.5em */
  height: 50%; /* height: 0.5em */
}