0

最大幅に基づいて画像のサイズを変更する次のコードを作成しました.height()。問題は、ブラウザのサイズを変更するときに画像のサイズを変更できる、応答性の高い画像のサイズ変更プラグインなどを見つけることができないことです。私のコードに実装できるもの、またはブラウザのサイズが変更されたときに画像のサイズが自動的に変更されることが知られている新しいレスポンシブ プラグインはmax-widthありますheightか?

最大幅のサイズ変更のための私のコード

// SET MIN AND MAX SIZE OF IMAGES
if (lboxitem.find('.tp-mainimage').width() > opt.maxWidth) {
    var oldimgw = lboxitem.find('.tp-mainimage').width();
    var oldimgh = lboxitem.find('.tp-mainimage').height();
    var perc = opt.maxWidth / oldimgw;
    lboxitem.find('.tp-mainimage').width(opt.maxWidth);
    lboxitem.find('.tp-mainimage').height(oldimgh*perc);
}

if (lboxitem.find('.tp-mainimage').width() < opt.minWidth) {
    var oldimgw = lboxitem.find('.tp-mainimage').width();
    var oldimgh = lboxitem.find('.tp-mainimage').height();
    var perc = opt.minWidth / oldimgw;
    lboxitem.find('.tp-mainimage').width(opt.minWidth);
    lboxitem.find('.tp-mainimage').height(oldimgh*perc);
}
4

1 に答える 1

4

使用.resize()( jQuery ドキュメント)

jsFiddle デモ

$(window).resize(function () {
    var _width = $(window).width(),
        _height = $(window).height();

    // call your function() to make changes to its allowed maxes
});​

必要なことにJavascriptさえ必要ないかもしれません...必要なことはCSSでできると考えてください。

img { width:100%; height:auto; min-width:300px; }

于 2012-08-09T19:30:13.637 に答える