2012-06-07 31 views
15

100%の幅でdivをズームアウトすることに興味があります。私が抱えている問題は、エレメントをスケールアウトして固定幅にし、もはや幅の100%を伸ばすことができなくなったときです。CSS 100%の幅の要素の拡大/縮小

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

(変換するために対立するものとして:スケールを)私はCSSのズームプロパティを使用し、それは期待通りに動作しますが、私はズームプロパティはよくサポートされていません聞きます。私の質問は、これはCSSの変換スケールで達成できますか?

+0

CSSは 'zoom'プロパティが実際に悪いサポートされています。 FirefoxもOperaもそれをサポートしていません。 – thirtydot

+0

これはあなたの後のことですか? http://jsfiddle.net/thirtydot/Fz7qh/5/ – thirtydot

+0

@thirtydot面白いアイデア。仕事をしているようだ。私はそれを受け入れることができるように答えとして投稿してください – levi

答えて

34

zoomプロパティは、この場合には、あなたが-transform-origin: 0 0;を追加して設定することができないものをエミュレートするために、width100/0.7 ~= 142.857143oldWidth/newScaleに:

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

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

なぜいくつかの人々は答えを受け入れるが、それをupvoteを与えていないのだろう...答えは正しいが、十分ではない? –

+0

'padding'も' width'に含まれていることを確認するためだけに 'box-sizing:border-box;'を追加しました –

+0

私はこの2つのアップボトムを与えることができたら – Johannes

関連する問題