Remove mysterious space that IE9 creates around <img>

Question

I'm trying to learn how to make crossbrowser pages and stuck at dealing with IE9: it creates some space near the <img> , see example

Look at the rightmost image, it should appear here. If space doesnt appear, hover the mouse over the image.

Can't imagine what's wrong, this image is only floated to left...

UPDATE: wow, seems like i've found out whats going on: IE9 makes image's height fit the height of container, but somehow make actual width equal to image's original width. But still keeps aspect ratio of image.

New question: how to force IE9 to make img fit into container with keeping aspect ratio and without magic

Answer 1

Changing this:

.header * {
  float: left;
  height: 100%;
}

To this:

.header * {
  float: left;
  height: inherit;
}

Fixes it as 100% is treated as auto in this scenario. Auto in this case is the size of the original image: not the size of the container. From there, IE believes it also has that width, and because the container resizes width-ways and not length-ways, the 'padding' is shown.

Inherit, on the other hand, resizes the image to fit the container, maintaining the aspect ratio the original image had.