immagine responsive problema con script jquery

[pmodugno]

Ciao ragazzi, ho bisogno del vostro aiuto, purtroppo non sono molto afferrato in programmazione. Questa è la mia homepage di un mio progetto personale: http://www.likealittledisaster.com/home

vorrei rendere la mia immagine principale responsive, ma non ci riesco. Credo che tutto dipenda da uno script che ho trovato in rete e che serve a virare le immagini in una tonalità di colore. Lo script per me è troppo complesso da capire.

jQuery(function () {
    jQuery(window).load(function () {
        // Fade in images so there isn't a color "pop" document load and then on window load
        jQuery(".item").animate({
            opacity: 1            
        }, 500);

        // clone image
        jQuery('.item').each(function () {
            var el = jQuery(this);
            el.css({
                "position": "absolute"
            }).wrap("<div class='img_wrapper' style='display: inline-flex; margin-bottom: 1em;'>").clone().addClass('item_base').css({
                "position": "absolute",
                'z-index': 100,
                "opacity": "1"
            }).insertAfter(el).queue(function () {
                var el = jQuery(this);
                el.parent().css({
                    "width": this.width,
                    "height": this.height
                });
                el.dequeue();
            });
        });

        var toColor = '#538128'; // qui inserisci il colore cui vuoi far virare le immagini (ho messo rosso per dimostrazione);        
        jQuery('.item_base').each(function () {
            tintImage(this, toColor);
        });

        jQuery('.img_wrapper').mouseover(function () {
            jQuery(this).children('.item_base').stop().animate({
                opacity: 0,
            }, 500);
        });
        jQuery('.img_wrapper').mouseout(function () {
            jQuery(this).children('.item_base').animate({
                opacity: 1,
            }, 500);
        });
    });
});

function tintImage(imgElement, tintColor) {
    // create hidden canvas (using image dimensions)
    var canvas = document.createElement("canvas");
    canvas.width = imgElement.offsetWidth;
    canvas.height = imgElement.offsetHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement, 0, 0);

    var map = ctx.getImageData(0, 0, imgElement.offsetWidth, imgElement.offsetHeight);
    var imdata = map.data;

    // convert image to grayscale
    var r, g, b, avg;
    for (var p = 0, len = imdata.length; p < len; p += 4) {
        r = imdata[p];
        g = imdata[p + 1];
        b = imdata[p + 2];

        avg = Math.floor((r + g + b) / 3);

        imdata[p] = imdata[p + 1] = imdata[p + 2] = avg;
    }

    ctx.putImageData(map, 0, 0);

    // overlay filled rectangle using lighter composition
    ctx.globalCompositeOperation = "lighter";
    ctx.globalAlpha = 0.5;
    ctx.fillStyle = tintColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // replace image source with canvas data
    imgElement.src = canvas.toDataURL();
}

Vi chiedo una mano a risolvere il mio problema e a rendere la mia immagine responsive. Vi ringrazio tantissimo.