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

Question

我有一个图像，用作 html 标记中的源代码img，位于div. 使用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;
}

小提琴： http: //jsfiddle.net/framj00/pz27X/1/
你能帮我解决这个问题吗？
非常感谢！:)

Answer 1

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

如果您希望图像是<div>不能em用于测量的父级大小的 50%，则需要使用%：

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