javascript - 动态图像调整大小

Question

我在网页上有一张图片需要拉伸(stretch)以适应窗口中的可用空间，同时保持其比例。这是我得到的:

http://www.lammypictures.com/test/

我希望大图像按比例拉伸(stretch)以匹配浏览器的高度和宽度，减去左侧和底部的 div 的大小。

所以问题实际上是 2 倍；首先，我需要获得减去链接和图像栏的最大高度和宽度，其次，我需要在浏览器调整大小的同时调整图像大小，同时保持比例。

如有任何帮助，我们将不胜感激。

干杯 生产加工

Answer 1

您可以尝试使用 jQuery ui 缩放效果:

$(document).ready(function () {

    resizeImage(); // initialize

    $(window).resize(function () {
        resizeImage(); // initialize again when the window changes
    });

    function resizeImage() {
        var windowHeight = $(window).height() - $('#nav').height(),
            windowWidth = $(window).width(),
            percentage = 0;

        if (windowHeight >= windowWidth) {
            percentage = (windowWidth / $('#image').width() ) * 100;
        }
        else {
            percentage = ( windowHeight / $('#image').height() ) * 100;
        }

        $('#image').effect('scale', { percent : percentage }, 1);
    };
 });

经过测试并且效果很好，但是，可能需要进行一些调整才能按照您喜欢的方式使用它。