/
index.md
112 lines (79 loc) · 6.5 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
---
title: mask-size
slug: Web/CSS/mask-size
---
{{CSSRef}}
**`mask-size`** は [CSS](/ja/docs/Web/CSS) のプロパティで、マスク画像の寸法を指定します。内在的な比率を維持するために、画像のサイズは完全または部分的に制約されることがあります。
> **メモ:** `mask-size` の後に要素に {{cssxref("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>`
- : `{{cssxref("<length>")}}` の値は、マスク画像の対応する軸を、指定された長さに拡大縮小します。負の長さは許可されていません。
- `<percentage>`
- : {{cssxref("<percentage>")}} の値は、マスク画像の対応する軸を、{{cssxref("mask-origin")}} の値で決定されるマスク配置領域に対する指定されたパーセント値に拡大縮小します。マスク配置領域は、既定では、ボックスのコンテンツとそのパディングを含む領域ですが、コンテンツのみの領域や、境界、パディング、コンテンツを含む領域に変更することもできます。負のパーセント値は許されません。
- `auto`
- : マスク画像の対応する軸を、固有の比率を維持するように拡大縮小するキーワードです。
- `contain`
- : 画像を可能な限り大きく拡大し、画像のアスペクト比を維持する (画像がゆがまない) ようにするキーワードです。画像はコンテナー内で*レターボックス*になります。画像は、{{cssxref("mask-position")}} のような他のプロパティで上書きされない限り、自動的に中央に配置されます。
- `cover`
- : `contain` の逆バージョンのキーワードです。画像を可能な限り大きく拡大縮小し、画像のアスペクト比を維持する (画像がゆがまない) ようにします。画像は、コンテナーの幅または高さ全体を「カバー」します。画像とコンテナーの寸法が異なる場合、画像は左右または上下のいずれかで切り取られます。
可能な値の解釈は、画像の固有の寸法 (幅と高さ) と固有の比率 (幅と高さの比率) に依存します。ビットマップ画像は、常に固有の寸法と固有の比率を持っています。ベクトル画像は、両方の固有の寸法を持つことがあり、したがって固有の比率も持つことがあります。また、固有の寸法を持たない場合もありますが、いずれの場合も固有の比率を持つ場合と持たない場合があります。グラデーションは、固有の寸法や固有の比率を持たない画像として扱われます。
そして、マスク画像の描画の大きさは、以下のように計算されます。
- `mask-size` の両方の要素が指定され、`auto` ではない場合
- : マスク画像は指定された寸法で描画されます。
- `mask-size` が `contain` または `cover` であった場合
- : 画像は、マスク配置領域に含まれる、またはマスク配置領域を覆う最大の寸法で、その固有の縦横比を維持して描画されます。画像が固有の縦横比を持たない場合は、マスク配置領域の大きさで描画されます。
- `mask-size` が `auto` または `auto auto` であった場合
- : 画像に両方の固有の寸法がある場合は、その寸法で描画されます。固有の寸法がなく、固有の比率もない場合は、マスク配置領域の寸法で描画されます。固有の寸法がなく、縦横比がある場合は、代わりに `contain` が指定されたかのように描画されます。画像が 1 つの固有の寸法と縦横比を持っている場合、その 1 つの寸法と縦横比で決まる寸法で描画されます。画像が 1 つの固有の寸法を持ち、縦横比を持たない場合は、固有の寸法と、マスク配置領域の対応する寸法を使って描画されます。
- `mask-size` の一方が `auto` でもう一方が `auto` ではない場合
- : 画像に固有の縦横比がある場合は、一方は指定された長さを使用し、もう一方の長さは指定された長さと指定された長さと固有の縦横比から計算して描画します。画像に固有の縦横比がない場合，その長さには指定された長さを使用します。もう一方の長さには、画像に対応する固有の長さがあればそれを使用します。そのような固有の寸法がない場合は、マスク配置領域の対応する寸法を使用します。
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
### マスクの大きさをパーセント値で設定
{{EmbedGHLiveSample("css-examples/masking/mask-size.html", '100%', 700)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)