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