how to specify a different image in css depending if the user visits on a desktop or a mobile browser

Question

Just a question about css for mobile devices,

i have an image that is 1260px wide on my website and when i look at it on the phone it destorts the website as the res

Answer 1

Inspired by Ivan's answer, here is a jQuery version that uses media queries to be as close as possible to his CSS3 solution (which doesn't work for me in Firefox 31 and Safari 7):

$(document).ready(function() {
    var mqsmall = "(min-device-width:320px)";
    var mqbig   = "(min-device-width:960px)";
    function imageresize() {
        if(window.matchMedia(mqbig).matches) {
            $('img[data-src-1260px]').each(function () {
                $(this).attr('src',$(this).attr('data-src-1260px'));
            });
        }
        else if(window.matchMedia(mqsmall).matches) {
            $('img[data-src-960px]').each(function () {
                $(this).attr('src',$(this).attr('data-src-960px'));
            });
        }
    }

    imageresize();

    $(window).bind("resize", function() {
        imageresize();
    });
});