CSS Using em unit. Half the size of an image within a div parent element

Question

I have an image, used as source in the html tag img, within a div. Using em size unit, I would want to resize my image as the half of his parent div box. So I have set img both CSS properties width and height with a value of 0.5em.

But as you can see in the following code, the result is not as expected!

<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/

Can you help me please to resolve that?

Answer 1

em's are used for proportional measurements. If you use em it's going to be based on the root font size, which is html { font-size: 16px; }. So width: 0.5em; height: 0.5em would actually be 8px.

If you want the image to be 50% of the size of the parent <div> you can't use em for a measurement, you need to use %:

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