Jquery .css 从当前大小缩放图像

Question

我正在尝试根据当前大小而不是原始大小调整图像大小，因为当屏幕尺寸发生变化时(使用@media screen.. {}，我已经对图像(在 css 文件中)进行了不同的变换属性，所以它会在不同尺寸的屏幕上看起来是一样的)。

//..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??

我想做的是:( link ) 仅使用图像，而不是字体..

Answer 1

您在警报中获得 NaN 值的原因是:

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

更多相关信息:CSS Transform on MDN

您需要计算将返回的矩阵转换为可用值所需的数学运算。然后将调整后的值反馈给 jQuery CSS 方法。另一种选择是尝试这样的事情:

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 });

希望这对您有所帮助。