У меня есть два изображения разных размеров, одно для экранов размером менее 759 пикселей, другое для экранов размером более 759 пикселей.

Мне удалось заставить источник изображений меняться при загрузке документа в зависимости от ширины окна. Но я действительно хотел бы иметь возможность делать это, когда размер браузера также изменен, но на всю жизнь я не могу этого сделать, кажется, он работает только при начальной загрузке страницы.

Это мой код:

$(document).ready(function() {
    function imageresize() {
        var contentwidth = $(window).width();
        if ((contentwidth) < '700'){
            $('.fluidimage').each(function(){
                var thisImg = $(this);
                var newSrc = thisImg.attr('src').replace('x2', 'x1');
                thisImg.attr('src', newSrc);
            });
        } else {
            $('.fluidimage').each(function(){
                var thisImg = $(this);
                var newSrc = thisImg.attr('src').replace('x1', 'x2');
                thisImg.attr('src', newSrc);
            });
        }
    }

    imageresize();//Triggers when document first loads

    $(window).bind("resize", function(){//Adjusts image when browser resized
        imageresize();
    });
 });