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.

1

2 Answers 2

177

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.

7
  • 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 4, 2016 at 23:40
  • 6
    @rinogo According to Can I use no current version of Firefox supports zoom, so I assume that's why -moz-transform is included.
    – Venning
    Mar 2, 2016 at 3: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 3, 2017 at 13:06
  • 3
    @BenjaminGruenbaum stackoverflow.com/questions/26488960/zoom-vs-scale-in-css3
    – adamj
    Apr 4, 2017 at 7: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, 2018 at 15:33
33

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

2
  • transform and scale is the modern approach :)
    – frage
    Feb 14, 2019 at 0:17
  • But it doesn't resize the width/height compared to zoom, they work differently Dec 26, 2022 at 1:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.