Question

我为基于最大宽度的图像重新调整大小制作了以下代码，使用.height()进行了相同的高度调整。问题仍然是我无法找到一个好的响应式图像重新大小插件或类似的东西可以重新调整大小浏览器的大小。我的代码或任何新的响应式插件是否可以在浏览器重新调整大小以及默认max-width和height时自动重新调整图像大小？

我的max width resize代码

// 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);
}

Answer 1

使用.resize()（jQuery docs）

jsFiddle DEMO

$(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; }

响应式jquery图像缩放器

1 个答案: