0

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

我已经尝试过高度 100% 和高度自动，但没有任何效果。

示例页面在这里 - 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>
4

1 回答 1

0

块元素不会扩展以垂直填充容器，因此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');
  }
 });
});

当它根据您希望它的外观设置高度时，您可能会弄乱数学。

于 2013-08-06T20:27:59.087 回答