изображения жидкости размера с браузером размером

Question

Кто-нибудь знает, как сделать изображение изменения размера в браузер с помощью JQuery, как этого

http://www.ellenrogers.co.uk/photoshoot/folly

?

Answer 1

Этот сайт использует этот код:

$(document).ready(function() { 
    var $img = $("#theImage"); 
    var ratio; 
    var offsetX = $img.offset().left; 
    var offsetY = $img.offset().top; 

    $(window).load(function() { 
     ratio = $img.width()/$img.height(); 
     $(this).resize(); 
    }); 

    $(window).resize(function() { 
     var viewportWidth = window.innerWidth || document.documentElement.clientWidth; 
     var viewportHeight = window.innerHeight || document.documentElement.clientHeight; 
     var availWidth = viewportWidth - offsetX - 25; 
     var availHeight = viewportHeight - offsetY - 25; 

     if (availWidth/availHeight > ratio) { 
      $img.height(availHeight); 
      $img.width(availHeight * ratio); 
     } else { 
      $img.width(availWidth); 
      $img.height(availWidth/ratio); 
     } 
    }); 
});