Question

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

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

你尝试过使用background-size：cover吗？然后，您将更改容器大小，图像大小将跟随它。

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

Answer 2

您在警报中获取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 });

希望这有帮助。

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

2 个答案: