Scale the contents of a div by a percentage

Question

Building a CMS of sorts where the user can move around boxes to build a page layout  basic idea anyway    I d like to pull the actual contents in from the database and build out the  page   but have it display at 50  scale   I realize I could have 2 sets of CSS - one for the actual front-facing page  and one for the admin tool and just shrink everything accordingly  but that seems like a pain to maintain   I was hoping there might be some kind of jquery or CSS or something that would allow me to populate a div and give it the properties     of 50  scale

User · Answer

This cross-browser lib seems safer - just zoom and moz-transform won't cover as many browsers as jquery.transform2d's scale().

http://louisremi.github.io/jquery.transform.js/

For example

$('#div').css({ transform: 'scale(.5)' });

Update

OK - I see people are voting this down without an explanation. The other answer here won't work in old Safari (people running Tiger), and it won't work consistently in some older browsers - that is, it does scale things but it does so in a way that's either very pixellated or shifts the position of the element in a way that doesn't match other browsers.

http://www.browsersupport.net/CSS/zoom

Or just look at this question, which this one is likely just a dupe of:

complete styles for cross browser CSS zoom

User · Answer

You can simply use the zoom property    myContainer      zoom  0 5      -moz-transform  scale 0 5       Where myContainer contains all the elements you re editing  This is supported in all major browsers

[javascript] Scale the contents of a div by a percentage?

Update

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to scale