Search code examples
javascriptjquerycssscale

Scale the contents of a div by a percentage?

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.

Solution

  • 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.