Html 使图像高度响应浏览器大小

我正在尝试将图像调整为所查看浏览器的高度。 理想情况下，我尝试将图像的高度设置为1100px的最大高度，并根据浏览器的高度进行缩放

我尝试了100%高度和高度自动，但没有任何效果

示例页面如下-

任何帮助都将不胜感激

 <div id="lane" style="top: 49px; width: 1328px;">


        <div id="album-intro" class="cell">

        <div class="wrap">

        <h1>
        Laura Myers </h1>
        <p>Financial Times, How To Spend It</p>
        <p>Founder of Atea Oceanie. Photographed in Knightsbridge, London, 2012. </p>

        </div>

        </div>

        <div class="cell">

    <img data-respond-to="height" data-presets="tiny,45,60 small,75,100 medium,360,480 medium_large,600,800 large,768,1024 xlarge,825,1100 huge,825,1100" data-base="http://trentmcminn.com/dev/storage/cache/images/000/027/laura," data-extension="jpg?1373373141" alt="laura.jpg" height="1100" width="825" src="http://trentmcminn.com/dev/storage/cache/images/000/027/laura,xlarge.jpg?1373373141" style="cursor: pointer;">

        </div>
        </div>

劳拉·迈尔斯
《金融时报》，如何消费

Atea Oceanie的创始人。摄于伦敦骑士桥，2012年

块元素不会展开以垂直填充容器，因此

高度：100%

和

高度：自动不会做你想做的事

我使用jquery完成这类工作的方式是：

$(document).ready(function(){
 var height = $(window).height();

 if(height < 1100){
  $('img').css('height', height + 'px');
 }

 $(window).resize(function(){
  var height = $(window).height();
  if(height < 1100){
   $('img').css('height', height + 'px');
  }
 });
});

$（文档）.ready（函数（）{
var height=$（window.height（）；
如果（高度<1100）{
$（'img'）.css（'height'，height+'px'）；
}
$（窗口）。调整大小（函数（）{
var height=$（window.height（）；
如果（高度<1100）{
$（'img'）.css（'height'，height+'px'）；
}
});
});

当它根据你想要的外观设置高度时，你可能会搞砸数学。
可能的“感谢”的复制非常出色，但是，您知道如何调整它的大小，使其不会溢出页脚下方吗？例如，高度是页眉和页脚之间的高度示例-或者使用jquery获取页脚的高度，如
$（'#footerId'）。height（）
或者只写下页脚的静态高度，当设置
height
变量时，比如说
var height=$（window.height（）-heightOfFooter
谢谢Nick，我试图将其添加到上面详述的代码中，但它似乎破坏了它，并且它停止了基于浏览器窗口的大小调整。真的很抱歉，我不太擅长这个……为了简单起见，让我们假设你的页脚高度是50px。由于您不希望img与页脚重叠，因此必须考虑该高度。要做到这一点，您可以在将
height
设置为窗口高度后立即说
height=height-50
。有道理？