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

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