★CSS3リファレンス
image-resolution …… 画像を描画する際の解像度を指定する
広告
image-resolutionプロパティは、画像を描画する際の解像度を指定します。
image-resolutionプロパティの指定が有効となるのは、GIF・JPEG・PNGなどのラスター画像（ビットマップ形式の画像）のみです。 SVGなどのベクター画像（座標やそれを結ぶパスで描画された画像）には固有の解像度が存在しないため、image-resolutionプロパティの指定は無効となります。
■値
- 解像度
- 数値に単位をつけて解像度を指定（初期値は1dppx）
- from-image
- 画像ファイル自体が解像度情報を保有している場合には、その解像度が使用される。保有していない場合には、初期値の 1dppx となる。
- snap
- デバイスの解像度に合うようにまるめられた数値の解像度となる
■初期値・適用対象・値の継承
- 初期値
- 1dppx
- 適用対象
- すべての要素
- 値の継承
- する
画像の解像度は、“単位長さ当たりの画素数”で定義され、以下の単位などで表すことができます。
dpi … dots per inch
dpcm … dots per centimeter
dppx … dots per px
dpcm … dots per centimeter
dppx … dots per px
例えば、72dpiとは1インチ当たり72個の画素（ドット）が配置されているということです。 image-resolutionプロパティの初期値は 1dppx ですが、これは1pxあたり1ドットの解像度で画像を表示するということです。
■使用例
CSSソースは外部ファイル（sample.css）に記述
img.sample1 {image-resolution: 300dpi;}img.sample2 {image-resolution: from-image;}
img.sample3 {image-resolution: snap;}
HTMLソース
<p>image-resolutionプロパティの指定なし<br>
<img src="images/neko.jpg">
</p>
<p>
image-resolution: 300dpi; を指定<br>
<img class="sample1" src="images/neko.jpg">
</p>
<p>
image-resolution: from-image; を指定<br>
<img class="sample2" src="images/neko.jpg">
</p>
<p>
image-resolution: snap; を指定<br>
<img class="sample3" src="images/neko.jpg">
</p>
↓↓↓
ブラウザ上の表示
image-resolutionプロパティの指定なし
image-resolution: 300dpi; を指定
image-resolution: from-image; を指定
image-resolution: snap; を指定
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
img.prefix_sample1 {-moz-image-resolution: 300dpi;
-webkit-image-resolution: 300dpi;
-o-image-resolution: 300dpi;
-ms-image-resolution: 300dpi;
}
img.prefix_sample2 {
-moz-image-resolution: from-image;
-webkit-image-resolution: from-image;
-o-image-resolution: from-image;
-ms-image-resolution: from-image;
}
img.prefix_sample3 {
-moz-image-resolution: snap;
-webkit-image-resolution: snap;
-o-image-resolution: snap;
-ms-image-resolution: snap;
}
HTMLソース
<p>image-resolutionプロパティの指定なし<br>
<img src="images/neko.jpg">
</p>
<p>
image-resolution: 300dpi; を指定<br>
<img class="prefix_sample1" src="images/neko.jpg">
</p>
<p>
image-resolution: from-image; を指定<br>
<img class="prefix_sample2" src="images/neko.jpg">
</p>
<p>
image-resolution: snap; を指定<br>
<img class="prefix_sample3" src="images/neko.jpg">
</p>
↓↓↓
ブラウザ上の表示
image-resolutionプロパティの指定なし
image-resolution: 300dpi; を指定
image-resolution: from-image; を指定
image-resolution: snap; を指定
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
© HTMQ