HTML/CSSズーム

Question

HTML要素のズームにはいくつかの問題があります。 FFやChromeでは、（非常に、非常に単純な、小さなコード）を見てみましょう：

http://jsfiddle.net/92wHQ/4/

ドロップダウンから、150％を選択します。黒と白のグラデーションボックスは原点サイズの150％に拡大されます。スケーリングされたので、水平のスクロールバーが表示され、新しいスクロールバーの高さと幅に対応するように垂直スクロールバーが展開されます。

今は150％から50％に切り替わります。グラデーションボックスは確かに50％にスケールされますが、（垂直の）スクロールバーは縮小された新しい新しい高さに対応するために収縮しません。代わりに、グラデーションボックスの下に空白の空白がたくさんあります。

ブラウザが100％を超えて100％以上のスケーリングのためにスクロールバーをリフレッシュする方法はありますか？私が100％を超えて行うのと同じように、100％未満で同じ動作を得るにはどうすればよいですか？私はこの空白を望んでいません。

Answer 1

私は何が起こっているかの洞察を持っている：

スケーリングは唯一のグラデーションボックスではなく、それは内部でコンテナのdivに影響を与えます。したがって、ボックスのサイズを150％にすると、ボックスはコンテナdivのサイズよりもかなり大きくなり（コンテナdivは常に496x250です）、スクロールバーが配置されます。

一方、サイズを小さくすると、グラデーションボックスはコンテナdivよりも小さくなり、スクロールバーが不要になります。

これを処理する方法はいくつかあります。主な問題は、コンテナdivのサイズ変更/スケーリングを処理していないことです。

Answer 2

フィディドのものが変更されました。これはあなたが望むものであるかどうかを確認してください：

http://jsfiddle.net/92wHQ/7/

は、スクロールバーは、実際には100％の寸法と大きいに基づいています。 100％のスクロールバーと50％のスクロールバーが同じ "サイズ"を持つのに対して、150％のスクロールバーは小さくなる唯一の時間です。