0

I'm trying to get the images to resize to the height of the browser being viewed. Ideally I am trying to get the height of the images to a max-height of 1100px, and scale down based on the height of the browser.

I have tried height 100% and height auto, but nothing is working.

Example page is here - http://www.trentmcminn.com/dev/albums/melanie-georgacopolous/

Any help would be appreciated.

 <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>
Jeremy
  • 327
  • 1
  • 7
  • 17

1 Answers1

0

block elements don't expand to fill a container vertically, so height: 100% and height: auto; won't do what you are wanting.

The way I've done this kind of thing using jquery is:

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

You can mess with the math when it sets the height depending on how you want it to look.

Nick
  • 14,291
  • 3
  • 17
  • 19
  • Thanks a lot worked brilliantly, however would you know how to resize it so it doesnt overflow underneath the footer? – Jeremy Aug 06 '13 at 20:38
  • i.e. the height is the height between the header and footer Example here - http://trentmcminn.com/dev/albums/orlando-salamanca-torres/ – Jeremy Aug 06 '13 at 20:39
  • either get the height of your footer with jquery like `$('#footerId').height()` or just write down the static height of your footer and when the `height` variable gets set say `var height = $(window).height() - heightOfFooter` – Nick Aug 06 '13 at 20:46
  • Thanks Nick, i tried to add that to the code you detailed above but it seemed to break it and it stopped resizing based on browser window. Really sorry im not so good at this.... – Jeremy Aug 06 '13 at 20:54
  • so for simplicity, let's assume that the height of your footer is 50px. Since you don't want the img to overlap the footer you have to take that height into account. To do this, you can say `height = height - 50` right after you set `height` equal to the window height. Make sense? – Nick Aug 06 '13 at 20:59
  • yes theoretically this makes sense, however when I have tried to do this in the jQuery code provided it breaks. eg - var height = $(window).height() - 40px; am i being stupid? – Jeremy Aug 06 '13 at 21:03
  • you have to get rid of the 'px' because you can't do math using a string. Don't worry, `.height()` returns the height in pixels already, so you just have to add the px at the end when you set the css height of the img. – Nick Aug 06 '13 at 21:06
  • Got ya - thanks, that worked but not how I intended, its cut 40px off the bottom but still the images are overflowing into the footer. - would you mind taking a look? http://www.trentmcminn.com/dev/albums/melanie-georgacopolous/ – Jeremy Aug 06 '13 at 21:09
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/34946/discussion-between-nick-and-jeremy) – Nick Aug 06 '13 at 21:31
  • No problems, thanks anyway Nick - I managed to tweak around it and sort it out - thank you for your help anyway - your original code got me on the road to success! – Jeremy Aug 07 '13 at 18:27