CSS Использование em unit. Половина размера изображения в родительском элементе div

Question

У меня есть изображение, которое используется как источник в теге html img, в пределах 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; 
} 

Fiddle: http://jsfiddle.net/framj00/pz27X/1/
Можете ли вы помочь мне, пожалуйста, чтобы решить, что?
большое спасибо! :)

Answer 1

em Используется для пропорциональных измерений. Если вы используете em, он будет основан на размере корневого шрифта, который равен html { font-size: 16px; }. Таким образом, width: 0.5em; height: 0.5em на самом деле будет 8 пикселей.

Если вы хотите, чтобы изображение было 50% от размера родительского <div> вы не можете использовать em для измерения, необходимо использовать %:

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