javascript - Is there a way to add the scale value for transform in css using JS -

i trying zoom in images fit window if height of images less using transform in css.

but images of different height uploaded users of website giving following css code not zooming enough different images.

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: 0.65s; -webkit-transition: 0.65s; -moz-transition: 0.65s; -o-transition:  0.65s; -ms-transition:  0.65s;*/ }  

so wanted add scale value of transform dynamically using js . have done till following script

script

function imagehandler() {   var images = $('.rslides ').find('img');    $('.rslides ').find('#bg').addclass('thumbnail');     settimeout(function () {         images.each(function () { // jquery each loops on jquery obj             var mh=290;             var h = $(this).innerheight(); // $(this) 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 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 big:",m);                       }      });     }, 1000);     }    

the above script maps image , add class .small if height less 290 . want add transform scale value according height of image

can 1 me out

thanks in advance

you can pass in transform property in same way passed in margin-top .big element. jquery handles prefixing on transform property, can pass in new scale value this:

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

jsfiddle demo.

for example, .small element on chrome given -webkit-transform property whereas on firefox given -moz-transform property.

as how generate scale values, can base these upon maximum of width or height according base value:

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

here base value 150. if largest of height or width 300, example, scale become 0.5 (as 150 / 300 = 0.5).

jsfiddle demo.