CSS Transform Scale To Create A Preview

Question

I am trying to scale a div with content in it to fit into a 200x200 box. Basically I want to make a 'preview' of a larger div by showing its contents in a smaller div.

I am scaling it 40% down. The problem is when I scale it 40% down and place it in the 200x200 box it overlaps. Is there a way say instead of scaling it down in percent to scale it down to a particular size? For instance could I scale it down to 200x200?

I wish to do this to several divs which vary in width and height and place them all into a 200x200 px box. I do not want to use overflow: hidden or scroll.

Answer 1

I think you need to do this with javascript. Waiting until all content of the div is loaded, including images, so that it has reached its final size. Then you need to get the width and height, either with jquery or by getBoundingClientRect (if you are using css-transforms than this method should be available) and calculate the scale factor, where you should take in account to check whether to use the width or the height of the div, to calculate the factor. That means that you should take care of the aspect ratio of the div and the desired size it should fit in. Finally you can set the value via javascript to the style.