使用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(); 

Here's the JSFiddle.

我可以不做，我想要做的是保持图像的纵横比。这可以怎么做？

Answer 1

如果更改图像的NATIVE高度属性而不是CSS高度，宽度将自动跟随宽高比。

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