-ms-zoom

作成:
更新:

IE5.5から独自実装された、画像や文字を拡大縮小するスタイルシート。IE8 beta2でCSS2.1の仕様通り接頭辞が付くようになった。

webkitには接頭辞なしのプロパティがパースされるようだがサポートされない。

rendering

CSS独自実装を使用したレンダリング(IE8 RC1)


元の画像。


div要素に対して150%に拡大。

文字のみ0.8に縮小。

img要素に対して0.8に縮小。

IE7に比べIE8betaでは要素が重なり合うために、使い勝手が悪くなっている。

coding

<style type="text/css">
.zoom1 {-ms-zoom: 150%;}
.zoom2 {-ms-zoom: 0.8;}
...
<div class="zoom1">
<img src="./img/-ms-zoom/shrine.jpg" title="1.5倍の画像" alt="" /><br />
div要素に対して150%に拡大。
</div>
<div>
<img src="./img/-ms-zoom/shrine.jpg" title="元の画像" alt="" /><br />
<span class="zoom2">文字のみ0.8に縮小。</span>
</div>
<div>
<img src="./img/-ms-zoom/shrine.jpg" title="0.8倍の画像" alt="" class="zoom2" /><br />
img要素に対して0.8に縮小。
</div>
...

検証に使用したブラウザ

Internet Explorer
Vertual PC上でのInternet Explorer 8 RC1 8.0.6001.18372(ベータ版)
Safari
AppleWebKit/525.27.1 Version/3.2.1 Safari/525.27.1(リリース版)

著作権情報

画像に関する著作権表示
© 青空白帆 2009.
ライセンス
Creative Commons 表示 2.1 日本
元の画像のタイトル
森戸神社(神奈川県三浦郡葉山町)
元の画像のURL
http://photozou.jp/photo/photo_only/110967/17642941?size=240 (リンク切れ)

リファレンス

-ms-zoom Attribute
http://msdn.microsoft.com/en-us/library/ms531189(VS.85).aspx
/trunk/WebCore/css/CSSPropertyNames.in - Webkit
https://github.com/WebKit/webkit/blob/master/Source/WebCore/css/CSSPropertyNames.in