web-dev-qa-db-ja.com

CSS要素を100％幅でスケーリング

幅が100％のdivを縮小したいと思います。私が抱えている問題は、要素をスケールアウトすると、要素の幅が固定され、幅の100％が拡張されなくなることです。

例- http://jsfiddle.net/Fz7qh/2/

CSSのズームプロパティを使用すると（変換：スケールではなく）期待どおりに機能しますが、ズームプロパティは十分にサポートされていないようです。私の質問は、CSS変換スケールでこれを達成できるのですか？

csswebkit-transform
19
levi

この場合の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%;
}​
44
thirtydot