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

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

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

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

Ответы

Ответ 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%;
}