Jquery not resizing image on slider

Question

The problem is that I have an image larger than 477 x 205, but i'll need them for another things, it would be a problem to make 2 or 3 images with diferent sizes. So, I decided to resize it on jquery. The major problem is that i'm new on JQUERY ( please, be patient :B ).

I've read some of the topics, but none helped me, the one that got closer was to add "$('#slides').css('background-size', '477px 205px');":

 $(document).ready(function() {
    $('#slides').coinslider({ hoverPause: true });

    $('#slides').css('background-size', '477px 205px');

    $('#slides').css('overflow', 'hidden');
});

but, that didn't solve it, also, it starts at the right size, but when the slider starts looping, it gets a mess again

Answer 1

Change this:

 $('#slides').css('background-size', '477px 205px');

To this:

$('#slides').width(477).height(205);

The overflow: hidden will hide the rest of the image.

Answer 2

More relevant code would be helpful in providing better guidance. Have you considered "background-size: cover" yet?

Reference 1 , Reference 2

Answer 3

After 1 week without the solution, i've reached on what I was making mistakes, i was o the .js, when the Js loads, he create his own CSS for the slider, so I had to add the "background-size: size " on it like this:

// positioning squares
                    $("#cs-"+el.id+i+j).css({ 
                        'background-position': -sLeft +'px '+(-sTop+'px'),
                        'left' : sLeft ,
                        'top': sTop,
                        'background-size':'477px 205px' 
                    });

as it wasn't fixed a size to it, it would take the real size of the image as default.

Thank you for trying to help me with this issue!