Question

我在网页上有一张图片，需要拉伸以适应窗口中的可用空间，同时保持其比例。这就是我所拥有的：

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

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

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

非常感谢任何帮助。

干杯 CIP

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

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

Answer 2

您可能只是没有设置图像元素的宽度和高度属性，并编写下一个样式：

.hentry img { max-width: 100%; }

相对于最小的一面，它会缩小。

P.S。但不在位：绝对;块没有任何大小。将父块设置为相对定位。

动态图像大小调整

2 个答案: