CSS Масштабировать элемент со 100% шириной

Question

Меня интересует масштабирование div со 100% шириной. Проблема, с которой я столкнулась, заключается в том, что когда я масштабирую элемент, он получает фиксированную ширину и больше не увеличивает 100% ширины.

Пример - http://jsfiddle.net/Fz7qh/2/

Когда я использую свойство CSS масштабирования (в отличие от преобразования: масштаб) он работает, как ожидалось, но я слышал свойство масштабирования не очень хорошо поддерживается. Мой вопрос: может ли это быть достигнуто с помощью шкалы преобразования CSS?

Answer 1

Чтобы эмулировать, что zoom свойство делает в этом случае, вы можете добавить -transform-origin: 0 0; и установить width в oldWidth/newScale (100/0.7 ~= 142.857143):

http://jsfiddle.net/thirtydot/Fz7qh/5/

div.zoomed { 
    -webkit-transform: scale(.7); 
    -webkit-transform-origin: 0 0; 
    width: 142.857143%; 
}​