トップページ  > CSS3  > image-resolution

★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

例えば、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
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ