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

Question

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

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

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

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%;
}​