調整窗口大小時更改圖像的寬度和高度

Question

我想在調整jquery中的窗口大小時更改圖像的寬度和高度，我有一個示例站點，但是該代碼對我來說很難。

示例站點為http://xctravels.com/。在此我們可以看到在調整窗口大小時圖像寬度和高度的動態變化。

Answer 1

這是一個如何執行此操作的示例： http : //jsfiddle.net/uEzNj/4/

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

Answer 2

您可以使用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>

上面的示例只是在調整窗口大小的同時調整圖像大小。

Answer 3

jQuery版本的調整大小是這樣的：

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

此處提供更多信息： http : //api.jquery.com/resize/

調整窗口大小時更改圖像的寬度和高度

問題描述

3 個解決方案

解決方案1
1 2012-12-20 12:03:59

解決方案2
0 2012-12-20 11:56:46

解決方案3
0 2012-12-20 12:00:46

調整窗口大小時更改圖像的寬度和高度

問題描述

3 個解決方案

解決方案1 1 2012-12-20 12:03:59

解決方案2 0 2012-12-20 11:56:46

解決方案3 0 2012-12-20 12:00:46

解決方案1
1 2012-12-20 12:03:59

解決方案2
0 2012-12-20 11:56:46

解決方案3
0 2012-12-20 12:00:46