93

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.

Dave
  • 28,833
  • 23
  • 113
  • 183
  • possible duplicate of [complete styles for cross browser CSS zoom](http://stackoverflow.com/questions/13393588/complete-styles-for-cross-browser-css-zoom) – Chris Moschini Jul 14 '14 at 16:17

2 Answers2

175

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.

Community
  • 1
  • 1
Benjamin Gruenbaum
  • 270,886
  • 87
  • 504
  • 504
  • 7
    Just out of curiosity, if `zoom` is supported in all major browsers, why is `-moz-transform: scale(0.5);` required? Or, are both statements required to cover all browsers? – rinogo Feb 04 '16 at 23:40
  • 6
    @rinogo According to [Can I use](http://caniuse.com/#feat=css-zoom) no current version of Firefox supports `zoom`, so I assume that's why `-moz-transform` is included. – Venning Mar 02 '16 at 03:58
  • `zoom` and `scale` are handled somewhat differently on some browsers, which means there's going to be a slight difference in the expected result. – adamj Apr 03 '17 at 13:06
  • 3
    @BenjaminGruenbaum http://stackoverflow.com/questions/26488960/zoom-vs-scale-in-css3 – adamj Apr 04 '17 at 07:26
  • 6
    If it's not looking good on firefox (i.e. not aligned properly) add this property `transform-origin: 0 0` or `-moz-transform-origin: 0 0` to fix it! – supersan May 21 '18 at 15:33
  • Even `transform-origin` is not enough. You can't really replicate the behavior of `zoom` with css transform. – janispritzkau Jul 24 '20 at 19:16
  • Yes, it does. Just checked @AndroidDev – Benjamin Gruenbaum Oct 06 '20 at 15:51
34

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

Community
  • 1
  • 1
Chris Moschini
  • 36,764
  • 19
  • 160
  • 190