血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > -ms-interpolation-mode

xrea-ad
hosting by xrea.com

-ms-interpolation-mode

作成:2008-07-06

MSIEが接頭辞をおそらくはじめてつけたCSSの独自拡張。画像を拡大縮小した際のリサンプリング方法を指定するプロパティでMSIE7以降で使用可能。.NET(C#)にも同様のものがあることから、.NETからの流用と思われる。

value 説明
nearest-neighbor 常に最近傍補間モードを使用
bicubic 常に高品質双三次補間モードを使用

rendering

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

左:nearest-neighbor 中:無指定 右:bicubic

期待されるレンダリング(MSIE7スクリーンショット)

coding

...
<style type="text/css">
/* 高品質双三次補間モード */
img.high {
 -ms-interpolation-mode:bicubic;
}
/* 最近傍補間モード */
img.low {
 -ms-interpolation-mode:nearest-neighbor;
}
</style>
...
<p>
<img src="./img/-ms-interpolation-mode/flower.png" width="200" height="300" class="low" title="nearest-neighbor" alt="" />
<img src="./img/-ms-interpolation-mode/flower.png" width="200" height="300" title="無指定" alt="" />
<img src="./img/-ms-interpolation-mode/flower.png" width="200" height="300" class="high" title="bicubic" alt="" />
</p>

独自実装の詳解

MSIE7ではズーム機能によって画面全体を拡大・縮小する場合の画像の補間方法と、img要素のwidth属性やheight属性で画像を拡大・縮小する場合の画像の補間方法に違いがある。

基本的には最近傍補間モード(nearest-neighbor)で補完されるのだが、ズーム機能で倍率を変えたときのみ、高品質双三次補間モード(bicubic)で補完される。

検証に使用したブラウザ

Internet Explorer
MSIE 7.0; .NET CLR 1.1.4322 バージョン 7.0.5730.11(リリース版)

著作権情報

画像に関する著作権表示
© rahen z 2006.
ライセンス
Creative Commons Attribution-Noncommercial 2.0 Generic
元の画像のタイトル
Maria passed
元の画像のURL
http://www.flickr.com/photos/11179848@N00/210850987

仕様書とリファレンス

msInterpolationMode Property (currentStyle, IMG, runtimeStyle, ...)
http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx
@IT:.NET TIPS 画像を高品質に拡大/縮小するには? - C#
http://www.atmarkit.co.jp/fdotnet/dotnettips/023resize/resize.html