Question

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

我尝试过高度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>

Answer 1

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

根据你想要的高度设置高度，你可以搞乱数学。

根据浏览器大小调整图像高度

1 个答案: