CSSで 'ズーム'とは何ですか？

Question

jQuery PluginのCSSルールで「zoom」記述子が使用されていることがわかりました.W3C Webサイトを調べて、それを拡大するのに使用されていましたが、どうすれば実装できますか？または、私はいくつかのビューポートを定義する必要がありますか？そしてそのようなビューポートをどう定義するのですか？または、私は全体のものについて間違っていますか？

は

a { 
    zoom:1; 
} 

a:hover { 
    zoom:2; 
} 

Answer 1

ズームには含まれていませんCSSの仕様ですが、Internet Explorer、Safari 4、Chromeでサポートされています（Firefoxの場合は、012以降は-moz-transform: scale(x)から3.5に近い効果が得られます）。 hereを参照してください。

ので、すべてのブラウザ

zoom: 2; 
zoom: 200%; 

は2でのあなたのオブジェクトをズームしますので、サイズを倍ようなものです。あなたはどちらホバーオン

a:hover { 
    zoom: 2; 
} 

を持っている場合、<a>タグは200％でズームすることを意味します。

私が言っているように、FireFox 3.5+では-moz-transform: scale(x)を使用していますが、それはまったく同じことをします。

編集：thirtydotからのコメントに応じて、scale()は完全な置き換えではありません。それは、zoomのように一直線に展開されず、むしろ他のコンテンツを強制的に排除することなく、コンテンツを超えて拡張されます。これは実際にはhereです。さらに、zoomはOperaではサポートされていないようです。

This投稿は、scaleとの非互換性を回避する方法と、jQueryを使用する回避策についての有用な情報を提供します。

Answer 2

だけIEとWebKitのサポートズームのようにそれを使用することが可能であり、そう、理論的にはそれはあなたが言っているまさにありません。

は、それは完全な効果だ見るには画像を、それを試してみてください:)

Answer 3

このプロパティは、現在の要素の拡大レベルを制御します。要素のレンダリングエフェクトは、カメラの「ズーム」機能のエフェクトです。このプロパティは継承されませんが、子要素のレンダリングにはまだ影響します。

例

ジョシュアMが指摘したように示すように、ズーム機能はFirefoxでサポートされていませんが、あなたは、単にこの問題を解決することができ

div { zoom: 200% } 
<div style=”zoom: 200%”>This is x2 text </div> 

Answer 4

：

div.zoom { 
    zoom: 2; /* all browsers */ 
-moz-transform: scale(2); /* Firefox */ 
} 

Answer 5

zoom: 1;は、IE6-7のために有用であると言われていましたが、hasLayoutをトリガすることでほとんどのIEのみのバグを解決することはできません。ここで全体のビューポート（ 'スクリーン'）を拡大するために使用

http://dev.w3.org/csswg/css-device-adapt/#zoom-desc

記載されているように

Answer 6

ズームは、@viewport記述子のCSS3仕様です。 多くのブラウザで個人の要素をズームすることもありますが、すべてではありません。

http://www.w3.org/TR/css3-transforms/#transform-functions

が、それはそれをサポートしているブラウザで「要素のズーム」より少し異なる動作します：スケールは、このような効果を達成するために使用する必要があります。 CSS3変換を指定します。

Answer 7

CSS zoom現在、ブラウザの総人口の86％以上が、幅広くサポートされています。

参照：http://caniuse.com/#search=zoom

document.querySelector('#sel-jsz').style.zoom = 4;

#sel-001 { 
 
    zoom: 2.5; 
 
} 
 
#sel-002 { 
 
    zoom: 5; 
 
} 
 
#sel-003 { 
 
    zoom: 300%; 
 
}

<div id="sel-000">IMG - Default</div> 
 

 
<div id="sel-001">IMG - 1X</div> 
 

 
<div id="sel-002">IMG - 5X</div> 
 

 
<div id="sel-003">IMG - 3X</div> 
 

 

 
<div id="sel-jsz">JS Zoom - 4x</div>