使用浏览器调整大小调整流体图像大小

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