Jquery .css scale image from current size

Question

I'm trying to resize images from current size, not from original size, because I have made different transform attributes to images (in css file) when the screen size changes (with @media screen.. {} so it would look the same in different size of screens).

//..this is only part of a code of a jslider..

callback: function( value ){
    var SliderValue = $('#SliderSingle2').attr('value');
    if(value== "2003"){                         
        //intresting part here:
        var currentSize = $("#img").css('transform');
        var currentSize = parseFloat(currentSize)*1.2;
        $("#img").css('transform', currentSize);
        alert(currentSize);
    }
}

//...that alert returns now NaN so parseFloat can't read 
//transform:scale(0.6) attribute.. but there isn't parseDouble option.. 
//Any succestions??

What I'm trying to do is this: ( link ) only with the images, not fonts..

Answer 1

Have you tried using background-size:cover? You would then change the container size and the image size would follow it.

<div style="background-image:url('myImage.jpg'); background-size:cover;"></div> 

Answer 2

The reason you're getting the NaN value in the alert is because:

var currentSize = $('#img').css('transform'); //Returns a string. Example: "matrix(a,b,c,d,tx,ty)"
parseFloat(currentSize); // NaN

More on that here: CSS Transform on MDN

You'll need to do the math required to convert the returned matrix into a usable value. Then feed the adjusted value back into the jQuery CSS method. Another option is to maybe try something like this:

var imgWidth = Math.round($('#img').css('width').replace('px','')*1.2),
    imgHeight = Math.round($('#img').css('height').replace('px','')*1.2);

$('#img').css({ width:imgWidth, height:imgHeight });

Hope this helps.