0

我正在尝试从当前大小而不是原始大小调整图像大小，因为当屏幕大小发生变化时（使用@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??

我要做的是：（链接）仅使用图像，而不是字体..

4

2 回答 2

0

您是否尝试过使用背景尺寸：封面？然后，您将更改容器大小，并且图像大小将跟随它。

<div style="background-image:url('myImage.jpg'); background-size:cover;"></div>
于 2013-05-30T07:09:23.813 回答
0

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

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

更多内容：MDN 上的 CSS 变换

您需要执行将返回的矩阵转换为可用值所需的数学运算。然后将调整后的值反馈回 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 });

希望这可以帮助。

于 2013-05-30T07:43:30.480 回答