IE7 image won't constrain itself if parent has width set

I have a gradient image that I'm using as the background for a variable-height container. The basic structure is simply (more complex than this, but just as a reference):

<div class="parent">
    <img src="..." style="width: 100%;height:100%;">
    <div class="content">
        content goes here
    </div>
</div>

Works great, in 开发者_如何学运维every browser, until I add an explicit width to .parent, and then guess which browser chokes? IE7! I love IE7 so much!

What happens is that the image ratio now resets, making it 960x960 since my .parent is 960px wide. Basically it seems to be ignoring the height:100%

I set up a fiddle to show the exact issue:

http://jsfiddle.net/SsYSv/2/

Any help appreciated :)

---

So i have reveised my answer,

basically wrap a div around the containing div .banner and set the width to that div.

http://jsfiddle.net/SsYSv/6/

<!--[if IE 7]><div class="ieBanner"><![endif]-->
     ...
<!--[if IE 7]></div><![endif]-->

.ieBanner
{
    width:400px;
}