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

Question

I am trying to zoom in some images to fit into the window if the height of images are less using Transform in CSS.

But as my images are of different height uploaded by the users of my website so just by giving following css code its not zooming enough for 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: all 0.65s;
-webkit-transition: all 0.65s;
-moz-transition: all 0.65s;
-o-transition:  all 0.65s;
-ms-transition:  all 0.65s;*/
}

So now I wanted to add the scale value of transform dynamically using JS . What I have done till now is the following script

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);
    }

The above script maps the image and add class .small if the height is less than 290 . So what I want to do is add Transform scale value according to the height of the image

Can any one help me out with this

Thanks in advance

James Donnelly · Accepted Answer · 2014-06-02 10:17:48Z

2

You can just pass in the transform property in the same way you passed in margin-top to your .big element. jQuery already handles the prefixing for you on the transform property, so you can simply pass in your new scale value like this:

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

JSFiddle demo.

For example, the .small element on Chrome will be given the -webkit-transform property whereas on Firefox it will be given the -moz-transform property.

As for how to generate the scale values, you can simply base these upon the maximum of width or height according to some base value:

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

scale = base / largest;

Here the base value is 150. If the largest of the height or width is 300, for example, the scale will become 0.5 (as 150 / 300 = 0.5).

JSFiddle demo.

edited Jun 2, 2014 at 10:17

answered Jun 2, 2014 at 10:05

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vikram Anand Bhushan Over a year ago

I wanted to know how to calculate the value to put inside the scale variable. I mean how much should I put when image is less than 290 in height ?. bcoz there could be image of height 230 or 250 so both should be zoomed differently right ?

James Donnelly Over a year ago

@VikramAnandBhushan I've added a new JSFiddle demo as well. Hope this helps!

Vikram Anand Bhushan Over a year ago

thanks yes it works bro Though I have one more question and that is . I also have media query written in my page what it does is remove the extra zoom amount when then phone changes from portrait to landscape . I tried adding transition scale(1) !important but it doesnot help

James Donnelly Over a year ago

@VikramAnandBhushan did you meant to put transition there instead of transform or is that a typo? Are you remembering to add the vendor prefixes (-webkit, -moz, etc.)?

Vikram Anand Bhushan Over a year ago

Let us continue this discussion in chat.

Joe Taylor · Accepted Answer · 2014-06-02 10:21:40Z

1

You can set up a variable with the value you want to scale by and use jQuery's css function on the element you want to scale, adding your variable as below:

var scaleValue = 2;

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

As James mentioned, jQuery handles prefixing so I've removed them from my example

edited Jun 2, 2014 at 10:21

answered Jun 2, 2014 at 10:03

Joe Taylor

5781 gold badge7 silver badges21 bronze badges

2 Comments

Vikram Anand Bhushan Over a year ago

okay. But how can I find the equivalent scaleValue for the images . How I should measure it

Joe Taylor Over a year ago

Is it relative to the height/width of the image, so for example, if the images is 300x300 scale by 2, 350x350 scale by 1.5 etc... or is it just dependent on whether the image is above/below a specified size?

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related