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

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

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

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

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

2 52
javascript css jquery grayscale

2 ответа:

вы можете просто использовать масштабирование свойства:

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

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

96

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

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

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

обновление

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

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

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

полные стили для кросс-браузера CSS zoom

22