difference between sizes javascript transform:scale(?.?)

Question

using javascript to calculate; how do I use transform:scale(w,h); to get this div to scale to fit its parent container?

I was in special math group at school so I'm not sure what I am googling (ratio, length comparison, proportion, fraction?) seen as we never learned that stuff (maybe for a day or two).

<div id="container"style="width:164px;height:164px:">

    <div id="square_of_unknown_size"> I want to always fill my parent </div>

</div>

edit: btw, I don't want to use width/height:100% because I have an image inside the square that is fit like that so, i really need to zoom.

this seems to zoom inward to the microscopic level:

'-webkit-transform':'scale('+$('#container').width()+'.'+$('#square_of_unknown_size').width()+','+$('#container').height()+'.'+$('#square_of_unknown_size').height()+')'

px A compare B px get A.B = always fit

bfavaretto · Accepted Answer · 2013-08-05 17:17:03Z

1

You have to calculate the proportion between the two divs:

var scaleX = $('#container').width() / $('#square_of_unknown_size').width();
var scaleY = $('#container').height() / $('#square_of_unknown_size').height();
$('#square_of_unknown_size').css('-webkit-transform', 'scale(' + scaleX + ',' + scaleY + ')');

answered Aug 5, 2013 at 17:17

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

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

3 Comments

Ben Muircroft Over a year ago

I cant see how its just divide!? and cause my div is always a square shape its like scale(scale+','+scale)

Ben Muircroft Over a year ago

can the effect be reversed?

bfavaretto Over a year ago

For example, if the container is 200x200, and the content is 100x100, the scale is 2.0, i.e., the content must be scaled by a factor of 2 to fit the container.

Collectives™ on Stack Overflow

difference between sizes javascript transform:scale(?.?)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related