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 回答