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

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 动态添加 transform 的 scale 值。到目前为止我所做的是以下脚本

脚本

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

您可以像将 margin-top 传递给 .big 元素一样，只传递 transform 属性。 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 .