The mask-size property
The mask-size property sets the size of the mask image. You can specify exact sizes in pixels/percentages or use the cover and contain keywords.
Syntax
selector {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Values
| Value | Description |
|---|---|
auto |
Original image size (default). |
cover |
Scales the mask while maintaining proportions to completely cover the element. |
contain |
Scales the mask while maintaining proportions to fit entirely within the element. |
100px 50px |
Specific sizes in pixels. |
50% 100% |
Sizes as percentages of the element's dimensions. |
Example . Cover size
Mask scales to completely cover the element:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
Example . Contain size
Mask scales to fit entirely within the element:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
Example . Fixed pixel size
Mask sized at 150×150 pixels:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Example . Percentage size
Mask takes 80% width and 60% height of the element:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
Example . Different axis sizes
Mask 200px wide and 100px tall:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
See also
-
property
mask-position,
defines the mask position -
property
mask-repeat,
defines mask repetition -
property
mask,
shorthand for all masking properties
