动态图像大小调整答案

【问题标题】：Dynamic Image Resizing动态图像大小调整
【发布时间】：2011-11-23 14:42:24
【问题描述】：

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

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

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

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

任何帮助将不胜感激。

干杯 CIP

【问题讨论】：

标签： javascript jquery html css image

【解决方案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);
    };
 });

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

【讨论】：

【解决方案2】：

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

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

而且会相对于最小边缩小。

附：但不在位置：绝对；没有任何大小的块。将父块设置为相对定位。

【讨论】：