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

Question

我试图让图像调整大小以适应正在查看的浏览器的高度。理想情况下，我试图将图像的高度设置为 1100 像素的最大高度，并根据浏览器的高度缩小。

我试过 height 100% 和 height auto，但没有任何效果。

示例页面在这里 - http://www.trentmcminn.com/dev/albums/melanie-georgacopolous/

如有任何帮助，我们将不胜感激。

 <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>

Answer 1

block 元素不会展开以垂直填充容器，因此 height: 100% 和 height: auto; 不会执行您想要的操作。

我使用 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');
  }
 });
});

当它根据您想要的外观设置高度时，您可能会搞砸数学。