Изображение IE7 не будет ограничивать себя, если у родителя установлена ​​ширина

Question

У меня есть изображение градиента, которое я использую в качестве фона для контейнера переменной высоты.Базовая структура проста (более сложна, чем эта, но просто в качестве справки):

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

Отлично работает в любом браузере, пока я не добавлю явную ширину к .parent, а затем угадаю, какой браузердроссели?IE7!Я так сильно люблю IE7!

Что происходит, так это то, что соотношение изображений теперь сбрасывается, делая его 960x960, так как мой .parent имеет ширину 960 пикселей.В основном, кажется, что игнорируется height:100%

Я настроил скрипку, чтобы показать точную проблему:

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

Любая помощь приветствуется:)

Answer 1

Итак, я понял свой ответ,

в основном оберните div вокруг содержащего div .banner и установите ширину этого div.

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

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

.ieBanner
{
    width:400px;
}