Question

I have made the following code for an image re-size based of max width and same goes for height using .height(). The problem is still that I cannot find a good responsive image re-size plugin or something like that could re-size image when we re-size browser. Is there anything that can be implemented in my code or any new responsive plugin known to anyone to re-size image automatically when the browser is re-sized plus a default max-width and height?

my code for 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

Use .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
});​

You might not even need Javascript for what you need… Think you can do what you need with CSS.

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