브라우저 크기에 따라 이미지의 높이를 조정하십시오.

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

당신이 할 수있는 당신이 그것을보고하는 방법에 따라 높이를 설정하는 수학 엉망.