mask-size

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-size が contain または cover であった場合

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

mask-size が auto または auto auto であった場合

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

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

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

mask-size = 
  <bg-size>#  

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

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

• Clipping and Masking in CSS