0

jqueryでウィンドウのサイズを変更しながら画像の幅と高さを変更したいのですが、サンプルサイトはあるのですが、そのコードは私には難しいです。

サンプル サイトはhttp://xctravels.com/です。 ここでは、ウィンドウのサイズ変更中に画像の幅と高さが動的に変化することを確認できます。

4

3 に答える 3

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() };
});​
于 2012-12-20T12:03:59.427 に答える
0

サイズ変更のjQueryバージョンは次のとおりです。

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

詳細はこちら: http://api.jquery.com/resize/

于 2012-12-20T12:00:46.370 に答える
0

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>

上記の例は、ウィンドウのサイズを変更しながら画像のサイズを変更するだけです。

于 2012-12-20T11:56:46.063 に答える