CSS使用em單元。在div父元素中的圖像大小的一半

Question

我有一個圖像，在的HTML標記中用作源，在div內。使用em大小單位，我想調整我的形象作爲他的父母div盒的一半。所以我已經設置IMG兩個CSS屬性寬度和高度與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的用於按比例測量。如果您使用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 */ 
}