Изменение размера или ширины в процентах минус значение с помощью jQuery и поддержание соотношения сторон

Question

Я хочу, чтобы изображение было на 100% шириной окна минус высота заголовка и его поля. В то же время он не должен быть шире ширины окна. Это, я думаю, я достиг с помощью следующего кода:

HTML:

<header></header>

<img id="photo" src="http://farm5.staticflickr.com/4031/4718599034_5ab720d0f9_b.jpg" realwidth="1024" realheight="768" />

CSS:

header {
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:150px;
    background-color:#000;
    margin:20px;
}

img {
    position:absolute;
    bottom:10px;
    left:0px;
    max-width:1024px;
    max-height:768px;
    margin-right:20px;
    margin-left:20px;

}

И, JQuery:

function setSize () {
   var windowHeight = $(window).height();
   var headerHeight = $('header').height();
   var windowWidth = $(window).width();


   $('img').height(windowHeight - headerHeight - 40);

   $('img').width(windowWidth - 40);
}


   $(window).resize(function () {
setSize();
setRatio();
   });

setSize();

Вот JSFiddle.

Что я не могу сделать и что я хочу сделать, так это сохранить соотношение сторон изображения. Как это может быть сделано?

Answer 1

Если вы измените атрибут высоты изображения NATIVE вместо высоты CSS, ширина автоматически будет соответствовать соотношению сторон.

$('img').attr('height',(windowHeight - headerHeight - 40)+'px');