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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Например

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

Update

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

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

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

complete styles for cross browser CSS zoom