Масштабирование divs и содержимого для соответствия

Question

Я создаю модуль для отображения html divs (страниц), которые на более позднем этапе будут распечатаны как A4. Область, в которой отображаются эти divs, однако, невелика, чтобы отображать полную ширину разделов, и, следовательно, страницы и их содержимое нужно уменьшать, чтобы они соответствовали области отображения.

Дети a4-страниц оформлены как с заданными ширинами/высотами, так и с процентами, поэтому было бы неплохо использовать шкалу CSS3 Tranform, чтобы масштабировать страницы настолько, чтобы их можно было отобразить, но это становится проблематично, поскольку масштаб выполняется после рендеринга и, таким образом, создает белую область вокруг страниц.

Я использую jquery, чтобы перемасштабировать страницы при изменении размера окна, а также реализовать это при загрузке страницы.

Как я могу масштабировать несколько div в общей оболочке, а также корректировать родительский объект так, чтобы масштабированный div показывался без каких-либо дополнений вокруг него?

Edit: Я собрал простой скрипку отображающего вопрос http://jsfiddle.net/96jkU/

#toBeScaled должен отображать более полную ширину #displayArea, но все еще масштабироваться до 0.5

Answer 1

Если я правильно понял вопрос правильно, вы хотите, чтобы масштабированный div сидел в верхнем левом углу родительского div.
В этом случае проблема заключается в том, что по умолчанию для начала преобразования установлено значение 50% 50%. Это полезно для поворотов (вы, как правило, хотите что-то вращать вокруг своего центра), но не для масштабирования; ваш div сжимается до центра, где он изначально был бы.

Решение: все, что вам нужно сделать, это добавить

transform-origin:0 0; 

(с соответствующими префиксами) к стилю для #toBeScaled.

См. updated fiddle.