CODEWITHSUNDEEP
jqueryresizeresize-image
user554114
user554114

Reputation: 11

fluid image resize with browser resize

Does anyone know how to make the image resize to the browser using jquery like this

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

?

Upvotes: 0

Views: 3115

Answers (1)

thirtydot
thirtydot

Reputation: 228182

That site uses this code:

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

Upvotes: 1

Related Questions