mask-size

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

mask-sizeCSS のプロパティで、マスク画像の寸法を指定します。内在的な比率を維持するために、画像のサイズは完全または部分的に制約されることがあります。

メモ: mask-size の後に要素に mask 一括指定プロパティが指定され、このプロパティの値が設定されていない場合、このプロパティの値は、一括指定プロパティによって初期値にリセットされます。

構文

css
/* キーワード構文 */
mask-size: cover;
mask-size: contain;

/* 値 1 つの構文 */
/* 画像の幅 (高さは 'auto' に設定) */
mask-size: 50%;
mask-size: 3em;
mask-size: 12px;
mask-size: auto;

/* 値 2 つの構文 */
/* 1 つ目の値: 画像の幅、2 つ目の値: 高さ */
mask-size: 50% auto;
mask-size: 3em 25%;
mask-size: auto 6px;
mask-size: auto auto;

/* 複数の値 */
/* これを mask-size: auto auto と混同しないでください */
mask-size: auto, auto;
mask-size: 50%, 25%, 25%;
mask-size: 6px, auto, contain;

/* グローバル値 */
mask-size: inherit;
mask-size: initial;
mask-size: revert;
mask-size: revert-layer;
mask-size: unset;

1 つ以上の <bg-size> 値で、カンマ区切りです。

<bg-size> 次の 3 つの方法のうち 1 つで指定することができます。

  • contain キーワードの使用
  • cover キーワードの使用
  • 幅の高さの値の使用

幅と高さを使って大きさを指定するには、1 つまたは 2 つの値を指定します。

  • 値が 1 つしか与えられていない場合は、幅が設定され、高さは auto に設定されます。
  • 2つの値が与えられた場合、1 つ目の値で幅を、2 つ目の値で高さを設定します。

それぞれの値は <length><percentage>auto の何れかです。

<length>

<length> の値は、マスク画像の対応する軸を、指定された長さに拡大縮小します。負の長さは許可されていません。

<percentage>

<percentage> の値は、マスク画像の対応する軸を、mask-origin の値で決定されるマスク配置領域に対する指定されたパーセント値に拡大縮小します。マスク配置領域は、既定では、ボックスのコンテンツとそのパディングを含む領域ですが、コンテンツのみの領域や、境界、パディング、コンテンツを含む領域に変更することもできます。負のパーセント値は許されません。

auto

マスク画像の対応する軸を、固有の比率を維持するように拡大縮小するキーワードです。

contain

画像を可能な限り大きく拡大し、画像のアスペクト比を維持する (画像がゆがまない) ようにするキーワードです。画像はコンテナー内でレターボックスになります。画像は、mask-position のような他のプロパティで上書きされない限り、自動的に中央に配置されます。

cover

contain の逆バージョンのキーワードです。画像を可能な限り大きく拡大縮小し、画像のアスペクト比を維持する (画像がゆがまない) ようにします。画像は、コンテナーの幅または高さ全体を「カバー」します。画像とコンテナーの寸法が異なる場合、画像は左右または上下のいずれかで切り取られます。

可能な値の解釈は、画像の固有の寸法 (幅と高さ) と固有の比率 (幅と高さの比率) に依存します。ビットマップ画像は、常に固有の寸法と固有の比率を持っています。ベクトル画像は、両方の固有の寸法を持つことがあり、したがって固有の比率も持つことがあります。また、固有の寸法を持たない場合もありますが、いずれの場合も固有の比率を持つ場合と持たない場合があります。グラデーションは、固有の寸法や固有の比率を持たない画像として扱われます。

そして、マスク画像の描画の大きさは、以下のように計算されます。

mask-size の両方の要素が指定され、auto ではない場合

マスク画像は指定された寸法で描画されます。

mask-sizecontain または cover であった場合

画像は、マスク配置領域に含まれる、またはマスク配置領域を覆う最大の寸法で、その固有の縦横比を維持して描画されます。画像が固有の縦横比を持たない場合は、マスク配置領域の大きさで描画されます。

mask-sizeauto または auto auto であった場合

画像に両方の固有の寸法がある場合は、その寸法で描画されます。固有の寸法がなく、固有の比率もない場合は、マスク配置領域の寸法で描画されます。固有の寸法がなく、縦横比がある場合は、代わりに contain が指定されたかのように描画されます。画像が 1 つの固有の寸法と縦横比を持っている場合、その 1 つの寸法と縦横比で決まる寸法で描画されます。画像が 1 つの固有の寸法を持ち、縦横比を持たない場合は、固有の寸法と、マスク配置領域の対応する寸法を使って描画されます。

mask-size の一方が auto でもう一方が auto ではない場合

画像に固有の縦横比がある場合は、一方は指定された長さを使用し、もう一方の長さは指定された長さと指定された長さと固有の縦横比から計算して描画します。画像に固有の縦横比がない場合,その長さには指定された長さを使用します。もう一方の長さには、画像に対応する固有の長さがあればそれを使用します。そのような固有の寸法がない場合は、マスク配置領域の対応する寸法を使用します。

公式定義

初期値auto
適用対象すべての要素。 SVG の場合は <defs> 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される
継承なし
計算値指定通り。ただし相対的な長さはは絶対的な長さに変換される
アニメーションの種類反復可能リスト

形式文法

mask-size = 
<bg-size>#

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

<length-percentage> =
<length> |
<percentage>

マスクの大きさをパーセント値で設定

仕様書

Specification
CSS Masking Module Level 1
# the-mask-size

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-size

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報