CSS3

プロパティ

mask-size

→●、mdn

マスク画像のサイズ法。

マスク層画像のサイズを指定する。

各種 値の定義については、background-size プロパティを見よ。[CSS3BG]。

mask-size 値を成すカンマで分離された値たちが、どのマスク層に寄与するかについては、複数のマスク画像の多層化法を見よ。

<bg-size>

＝[ <length-percentage [0,∞]> | auto ]{1,2}
| cover
| contain

<length-percentage>[0,∞] | auto ]{1,2}

2 個の成分値は、順に、画像の横幅、縦幅を与える。与えられた成分値が 1 個だけの場合、2 個目は auto と見なされる。

百分率は、背景位置決め区画に相対的になる。

一方の次元に限り auto 値の場合：

画像は生来な縦横比を有するならば、それと他方の次元のサイズを利用して解決される／
画像は、その次元において生来なサイズを有するならば、それを利用する／
他の場合は 100% と扱われる

両次元とも auto 値の場合：

画像は、少なくとも一方の次元において生来なサイズを有するならば、それ（それら）が利用されるべきであり、欠落している次元は、前段落の auto と同様にふるまう。他の場合のサイズは、contain と同様に決定される【例： 生来な縦横比しか無いベクター画像】。

【このサイズは、［指定サイズ ← 与えられたサイズ； 既定のオブジェクト サイズ ← 背景位置決め区画］の下で、既定のサイズ法アルゴリズムを利用して解決される。】

負な値は無効。

cover

画像を ― 生来な縦横比を有するならば，それを保全しつつ — その［横幅、縦幅］とも背景位置決め区画を完全に覆うような、最小サイズに拡縮する。 【このサイズは、［拘束矩形 ← 背景位置決め区画］の下で，被覆拘束として解決される。】

contain

画像を ― 生来な縦横比を有するならば、それを保全しつつ ― その［横幅、縦幅］とも背景位置決め区画の内側に収まるような、最大サイズに拡縮する。

【このサイズは、［拘束矩形 ← 背景位置決め区画］の下で、包含拘束として解決される。】

テスト