调整窗口大小时更改图像宽度和高度答案

【问题标题】：change image width and height while window resize调整窗口大小时更改图像宽度和高度
【发布时间】：2012-12-20 20:03:59
【问题描述】：

我想在 jquery 中调整窗口大小时更改图像的宽度和高度，我有一个示例站点，但该代码对我来说很难。

示例站点是http://xctravels.com/ 在这里我们可以看到调整窗口大小时图像宽度和高度的动态变化。

【问题讨论】：

【解决方案1】：

JavaScript

var lastSize = { width: $(window).width(), height: $(window).height() };
$(window).resize(function (e) {
    var win = $(window);
    $('img').each(function (i, img) {
        img = $(img);
        var w = img.width(),
            h = img.height();
        img.width(w + win.width() - lastSize.width);
        img.height(w + win.height() - lastSize.height);        
    });
    lastSize = { width: win.width(), height: win.height() };
});

【讨论】：

【解决方案2】：

jQuery 版本的 resize 是这样的：

 $(window).resize(function() {
    $('body').prepend('<div>' + $(window).width() + '</div>');
 });

更多信息在这里：http://api.jquery.com/resize/

【讨论】：

【解决方案3】：

你可以使用 window.resize 事件

window.onresize = function(event) {
//Your code
}

例子：

<body>
    <script>
        window.onresize=function(){
        if ($("#imageresize").width()>200 && $("#imageresize").height()>200){
            $("#imageresize").width($("#imageresize").width()-parseInt(10));
            $("#imageresize").height($("#imageresize").height()-parseInt(10));
        }
        }
    </script>
    <img src="yourimage.jpg" width="800" height="400" id="imageresize"/>
</body>

上面的例子只是在调整窗口大小的同时调整图像大小。

【讨论】：