“CSS Images Module”

概要

“CSS Images Module”は“<image>”値や置換要素に関連するCSSの機能について定義している仕様書です。

“background-image”プロパティなどのCSSのプロパティによる画像や置換要素の描画方法を指定するプロパティの他に“linear-gradient()”関数などのグラデーション関数についても定義しています。

仕様書

定義されているプロパティ

object-fit
object-position
image-orientation
image-rendering
image-resolution

定義されている値

<image>

定義されている関数

linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
image()
image-set()
cross-fade()
element()
conic-gradient()
repeating-conic-gradient()

画像やオブジェクトの大きさ

CSSで使用される画像はGIFやJPGなどのバイナリー形式の画像、SVGなどのマークアップ言語、CSSグラデーションのようなCSS固有の形式など多くのソースからもたらされます。また、CSSによって整形される文書にも多くの画像や動画、プラグインや他の文書が埋め込まれ、これらは総称して“オブジェクト(Objects)”と言います。

オブジェクトはその種類や大きさについての多くの情報をCSSで使用するために提供します。

オブジェクトの大きさの種類

自然寸法と自然サイズ

“自然寸法(Natural Dimensions)”はオブジェクトが持つ本質的な大きさです。“自然高(Natural Height)”と“自然幅(Natural Width)”、“自然アスペクト比(Natural Aspect Ratio)”の組み合わせで、オブジェクトはこれらをすべて持っている場合もありますが、このうちいくつか、もしくはすべてが欠落している場合もあります。

ラスター画像は自然高、自然幅、自然アスペクト比のすべてを持ちます。一方、SVG画像のようなベクター画像は自然高と自然幅のみ、もしくは自然アスペクト比のみで他の寸法が欠落している場合もあります。また、CSSグラデーションや“iframe”要素による埋め込み文書などは自然高、自然幅、自然アスペクト比のいずれも持ちません。ほとんどの場合にはオブジェクトが2個の自然寸法を持っていれば残り1個の自然寸法が自動的に算出されるため、オブジェクトが自然寸法を2個だけ持つことはありませんが、フォーム・コントロールなど一部のオブジェクトは自然高と自然幅のみを持ち、自然アスペクト比を持たないことがあります。

オブジェクトの自然アスペクト比に“0”や“∞”が含まれる場合にはオブジェクトは自然アスペクト比がないものとして扱われます。

ICO形式のアイコンである場合などにオブジェクトに複数の大きさがある場合にはその中で最も大きい面積のものを自然寸法として使用します。その大きさとなる複数のアスペクト比があるか、もしくは複数のアスペクト比があって大きさが決まっていない場合にはデフォルト・オブジェクト・サイズのアスペクト比に最も近いものが使用されます。この時、デフォルト・オブジェクト・サイズの中にカバー・コンストレイントによって収まりながら最も大きな面積となるアスペクト比を選択します。もし、複数のアスペクト比がこの条件にあてはまるのであれば最も横幅が大きなものが自然寸法として使用されます。

自然高と自然幅はまとめて“自然サイズ(Natural Size)”と呼ばれます。

指定サイズ

“指定サイズ(Specified Size)”はCSSの“width”プロパティや“height”プロパティ、“background-size”プロパティなどで指定されるオブジェクトの大きさです。指定サイズは絶対的な横幅と高さ、もしくは大きさについての制限の組み合わせです。

コンクリート・オブジェクト・サイズ

“コンクリート・オブジェクト・サイズ(Concrete Object Size)”はオブジェクトの自然寸法と指定サイズ、オブジェクトが置かれたコンテキストでのデフォルト・オブジェクト・サイズを組み合わせた結果生成される長方形状の領域です。

デフォルト・オブジェクト・サイズ

“デフォルト・オブジェクト・サイズ(Default Object Size)”は絶対的な横幅と高さを持つ長方形上の領域で、自然寸法や指定サイズが欠落している場合にコンクリート・オブジェクト・サイズを算出するために使用されます。

CSSとオブジェクトの折衝

1. “background-image”プロパティの“url()”関数や“img”要素の“src”属性などによって文書に画像が読み込まれる時、まずCSSはオブジェクトの自然寸法を調べます。
2. 次に、CSSは自然寸法と指定サイズ、オブジェクトが使用されるコンテキストでのデフォルト・オブジェクト・サイズを使用してコンクリート・オブジェクト・サイズを算出します。これにより、オブジェクトが描画される領域の大きさや位置が決定されます。
3. 次に、CSSはオブジェクトにコンクリート・オブジェクト・サイズで描画されるように求めます。コンクリート・オブジェクト・サイズがオブジェクトの自然寸法と異なる場合にどのようにオブジェクトを描画するべきかはCSSによって定義されていません。この場合にはオブジェクトはコンクリート・オブジェクト・サイズを満たすために自身の大きさを調整したり、オブジェクト自身の制約を満たすためにコンクリート・オブジェクト・サイズとは異なる大きさで描画されたりします。
4. 最後に、CSSによって特に定義されていなければオブジェクトのコンクリート・オブジェクト・サイズからはみ出た部分が切り取られます。

コンクリート・オブジェクト・サイズの算出

既定のサイジング・アルゴリズム

“既定のサイジング・アルゴリズム(Default Sizing Algorithm)”はオブジェクトのコンクリート・オブジェクト・サイズを算出するための最も一般的な規則です。既定のサイジング・アルゴリズムはオブジェクトの自然寸法と制約のない指定サイズ、もしくは明確な横幅と高さのいずれかによって同時にかけられた制約の中でコンクリート・オブジェクト・サイズを算出します。

“list-style-image”プロパティによるものなどのいくつかのオブジェクトの大きさは完全に既定のサイジング・アルゴリズムに従って決定されます。一方、“background-image”プロパティなどによるオブジェクトの大きさの決定の際には既定のサイジング・アルゴリズムを使用しつつも最終的なコンクリート・オブジェクト・サイズを算出する前に追加の規則を適用します。

既定のサイジング・アルゴリズムは以下のように定義されています。

指定サイズが明確な横幅と高さである場合

コンクリート・オブジェクト・サイズは指定された横幅と高さです。

指定サイズが横幅と高さのどちらかのみである場合

与えられた横幅もしくは高さをコンクリート・オブジェクト・サイズの横幅もしくは高さとして使用し、残る寸法を以下のように算出します。

1. オブジェクトに自然アスペクト比があれば、コンクリート・オブジェクト・サイズの残りの寸法は与えられた寸法とアスペクト比を用いて算出します。
2. そうでなければ、不足している寸法が自然寸法にあるのであれば、コンクリート・オブジェクト・サイズの残りの寸法は自然寸法から取られます。
3. そうでなければ、コンクリート・オブジェクト・サイズの残りの寸法はデフォルト・オブジェクト・サイズから取られます。

指定サイズに制約がない場合

1. オブジェクトに自然幅と自然高のいずれかがあれば自然寸法が指定サイズであるかのようにコンクリート・オブジェクト・サイズを算出します。
2. そうでなければ、デフォルト・オブジェクト・サイズに対してコンテイン・コンストレイントで収まるようにコンクリート・オブジェクト・サイズを算出します。

コンストレイント・サイジング

既定のサイジング・アルゴリズムによるもの以外の一般的なオブジェクトの大きさの指定方法は“コンテイン・コンストレイント(Contain Constraint)”と“カバー・コンストレイント(Cover Constraint)”です。これらの大きさはオブジェクトの好ましいアスペクト比を用いた長方形の領域である“コンストレイント・レクタングル(Constraint Rectangle)”に対して決定されます。

コンテイン・コンストレイント

コンクリート・オブジェクト・サイズをオブジェクトの自然アスペクト比と同じアスペクト比を持ち、横幅と高さのいずれもコンストレイント・レクタングルの横幅と高さ以下である最も大きな長方形として大きさを算出します。

カバー・コンストレイント

コンクリート・オブジェクト・サイズをオブジェクトの自然アスペクト比と同じアスペクト比を持ち、横幅と高さのいずれもコンストレイント・レクタングルの横幅と高さ以下である最も小さな長方形として大きさを算出します。

いずれの場合にもオブジェクトが自然アスペクト比を持たない場合にはコンクリート・オブジェクト・サイズは指定されたコンストレイント・レクタングルです。

プロパティ

値

関数