JQuery - can I resize a background image to a given size?

Question

I am in a situation where I urgently need to adjust the background image of the div to a certain size. Does anyone know if this is possible using jQuery? I know what size it should be, it should not be resized with a div. 35,000 images were scaled to the wrong size, and for this you need to go in real time, so resizing images is not an option!

Any advice appreciated!

EDIT: I just see if we can change the HTML to output the background image from the DIV and put it in a separate absolutely positioned div in the same with the IMG tag in it ... Then the IMG tag can be changed using CSS.

Answer 1

CSS3 . , , Opera, Safari, Chrome, Firefox, Konqueror IE9:

.myClass
{
    -o-background-size: 200px 50px;
    -webkit-background-size: 200px 50px;
    -khtml-background-size: 200px 50px;
    -moz-background-size: 200px 50px;
    background-size: 200px 50px;
}

jQuery.

, , .

Answer 2

css:

#myDiv {
            background: transparent url(../../Images/2.jpg);
            background-size: 400% 400%; 
        }

, "400% 400%" . "px" "em", , .. . CSS3 : http://www.w3.org/TR/css3-background/#the-background-size

jquery :

$('#myDiv').css({
        'background-size': '200% 200%' 
    });

Answer 3

CSS 3, .

JavaScript CSS, , (<img> ), , ... .

- script ImageMagick ( bash, PHP - ), 35 000 . ( ).

Answer 4

.

 #img.source-image {
      width: 100%;
      position: absolute;    
      top: 0;
      left: 0;
}

Answer 5

background-image, 100%. , 1000 . , - , .

You can also create code to place the tag <img>inside the div. Then the image can be scaled to 100%. To do this, you should ask things in CSS or a div like this:

$('div.niceImage').each(function()
{
    var imUrl = $(this).style('background-image'); // if not in style itself, we should ask it to the CSS rules. Don't know if jQuery does this for you.
    $(this).prepend('<img style="position:absolute;width:100%;height:100%;" src="' + imUrl + '" />');
});