Question

如果在CSS中使用Transform的图像高度较低，我试图放大一些图像以适应窗口。

但由于我的网站用户上传了不同高度的图片，所以只需提供以下css代码即可缩放不同的图像。

CSS

.small{
transform:scale(1.42,1.42);
-webkit-transform:scale(1.42,1.42);
-moz-transform: scale(1.42,1.42);
-o-transform:  scale(1.42,1.42);
-ms-transform:  scale(1.42,1.42);

/*transition: all 0.65s;
-webkit-transition: all 0.65s;
-moz-transition: all 0.65s;
-o-transition:  all 0.65s;
-ms-transition:  all 0.65s;*/
}

所以现在我想使用JS动态添加scale transform值。我到目前为止所做的是以下脚本

SCRIPT

function imageHandler() {
  var images = $('.rslides ').find('img');
   $('.rslides ').find('#bg').addClass('thumbnail');
    setTimeout(function () {
        images.each(function () { // jQuery each loops over a jQuery obj
            var mh=290;
            var h = $(this).innerHeight(); // $(this) is the current image

                if( h < mh)
                    {  
                       $(this).addClass('small');
                        var m = mh-h;
                        m = m/2;
                          // m = m + pginationH;
                        $(this).css('margin-top', +m + "px");
                        console.log("padding for small:",m);
                    }
                if(h > mh)
                    {
                        $(this).addClass('big');
                        var m = h-mh;
                        m = m/2;
                        //console.log(m); 
                        $('.big').css('margin-top',-m  +"px" ); 
                        console.log("padding for big:",m);

                     }    
 });
    }, 1000);
    }

如果高度小于290，上面的脚本会映射图像并添加类.small。所以我想要做的是根据图像的高度添加Transform比例值

任何人都可以帮我解决这个问题

提前致谢

Answer 1

您可以像传递transform到margin-top元素一样传递.big媒体资源。 jQuery已经在transform属性上为您处理了前缀，因此您只需传递新的比例值，如下所示：

$('.small').css({
    transform: 'scale(' + scale + ')'
});

JSFiddle demo

例如，Chrome上的.small元素将获得-webkit-transform属性，而在Firefox上则会获得-moz-transform属性。

至于如何生成比例值，您可以根据某个基值简单地将其基于width或height的最大值：

var height = $('.small').height(),
    width = $('.small').width(),
    largest = height > width ? height : width,
    base = 150,
    scale;

scale = base / largest;

此处base值为150.例如，如果height或width中的最大值为300，则比例将变为0.5（为150/300） = 0.5）。

JSFiddle demo

Answer 2

您可以使用要缩放的值设置变量，并在要缩放的元素上使用jQuery的css函数，如下所示添加变量：

var scaleValue = 2;

$('.element-to-scale').css({
    transform: 'scale(' + scaleValue + ')'
});

正如James所说，jQuery处理前缀，所以我从我的示例中删除了它们

有没有办法使用JS在css中添加转换的比例值

2 个答案: