Масштабировать содержимое div на процент?

Построение CMS, где пользователь может перемещать блоки для создания макета страницы (в любом случае, основная идея).

Я хотел бы вытащить фактическое содержимое из базы данных и создать "страницу", но отображать ее в масштабе 50%.

Я понимаю, что у меня может быть 2 набора CSS - один для фактической страницы, обращенной к фронту, и один для админ-инструмента и просто сжимать все соответственно, но это кажется болью для поддержания.

Я надеялся, что может быть какой-то jquery или CSS или что-то, что позволило бы мне заполнить div и дать ему свойства (?) 50-процентной шкалы.

Ответ 1

Вы можете просто использовать свойство zoom:

#myContainer{
    zoom: 0.5;
    -moz-transform: scale(0.5);
}

Где myContainer содержит все элементы, которые вы редактируете. Это поддерживается во всех основных браузерах.

Ответ 2

Этот кросс-браузер lib кажется более безопасным - просто масштабирование и moz-transform не будут охватывать столько браузеров, сколько jquery.transform2d scale().

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

Например

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

Update

ОК. Я вижу, что люди голосуют за это без объяснений. Другой ответ здесь не будет работать в старом Safari (люди, работающие с Tiger), и он не будет работать последовательно в некоторых старых браузерах, то есть он масштабирует все, но делает это так, чтобы либо очень пикселизовать, либо сдвигать положение элемента таким образом, который не соответствует другим браузерам.

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

Или просто посмотрите на этот вопрос, который, скорее всего, просто обманул:

полные стили для масштабирования CSS в браузере