CSS3

プロパティ

image-resolution

[Edge]？。→●、mdn(en)、mdn

画像解像度の上書き法。

課題： image-set() 記法は、画像の生来な解像度を改め得る ― それは、このプロパティを設定しなくても、自動的に尊守されるのが理想的だが【？】。これをどう解決すべきか？ 初期値を、“CSS が他を指示しない限り 1dppx とする”を意味する auto に変えるか？ image-resolution は、解像度が CSS における他の何かで設定された画像には効果がないようにするか？ あるいは、image-set() を、それが常に何らかの方法で 1dppx 画像を生産するように，どうにか wordsmith するか？

image-resolution プロパティは、［［要素内／要素上］で利用されるすべてのラスター画像］の選好解像度を指定する。それは、内容画像（例えば，置換要素や生成内容）にも、装飾的な画像（background-image など）にも影響する。画像の 選好解像度 は、画像の生来な寸法を決定するために利用される。
natural resolution 各種 値の意味は：

from-image

画像形式で指定された内在解像度を使用します。画像が自身の解像度を指定しなかった場合、明示的に指定された解像度が（与えられていれば）使用し、そうでなければ既定で 1dppx（1 画像ピクセル毎 CSS ピクセル）となります。

注記： どのメタデータを利用できるかに対しては、ある制約が課される ― レベル 3 の § 画像メタデータを見よ。

<IMG src="Com/DotPicture.gif" style="width:100px">
<IMG src="Com/DotPicture.gif" style="width:100px;
 image-resolution:from-image;
">

<resolution> ○

選好解像度を数値的に指定する。この場合の 1“ドット”は、1 画像画素に対応する。

【すなわち、［[CSS-VALUES-3] による <resolution> の定義］に記されている“ドット”は 1 画像画素と解釈される。】

<IMG src="Com/DotPicture.gif" style="width:100px">
<IMG src="Com/DotPicture.gif" style="width:100px;
 image-resolution:60dpi;
">

snap

このキーワードが伴われている <resolution> は、1 画像画素が機器画素の整数倍に対応するような、最も近い値に丸めた結果に算出される。解像度が画像からとられる【from-image が供されている】場合、生来な解像度の使用値は，画像のネイティブな解像度を同様に調整した結果になる。

<IMG src="Com/DotPicture.gif" style="width:100px">
<IMG src="Com/DotPicture.gif" style="width:100px;
 image-resolution:30dpi snap;
">

SVG などのベクター形式には、生来な解像度は無い。このプロパティは、ベクター画像には効果がない。

img.high-res {
  image-resolution: 300dpi;
}

img { image-resolution: from-image }

img { image-resolution: from-image 300dpi }
img { image-resolution: 300dpi from-image }

img { image-resolution: 300dpi }

img { image-resolution: 300dpi snap; }

img { image-resolution: snap from-image; }

テスト