Free tools Windows power users keep installed
One-click scans. No signup required.
Use mask-size: contain to show an entire mask without cropping, or mask-size: cover to fill the mask positioning area, accepting that some of the mask may be cropped. For a specific size, use one value to set the width while keeping the height automatic, or two values to set both dimensions.
What does CSS mask-size do?
mask-size controls the rendered size of a CSS mask image. Its initial value is auto. The property accepts contain, cover, or one or two lengths, percentages, or auto values. Negative lengths and percentages are not allowed. See the MDN reference for mask-size and the W3C CSS Masking Module Level 1.
When should you use contain or cover?
| Value | Effect | Trade-off |
|---|---|---|
contain |
Scales the mask proportionally so the whole image fits inside the mask positioning area. | May leave unused space along one dimension. |
cover |
Scales the mask proportionally until it fills the positioning area. | May crop the mask when its aspect ratio differs from the area’s. |
Choose contain when every part of the mask must remain visible. Choose cover when filling the area matters more than showing the entire mask.
How do you set a specific mask size?
A single value sets the width; the height is auto and follows the source’s proportions when available. Two values set width first and height second. Setting both dimensions to different proportions from the original can distort the mask.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
/* Width is 50%; height stays auto and follows the source ratio. */
.example {
mask-size: 50%;
}
/* Width and height are explicitly set. */
.example--fixed {
mask-size: 120px 80px;
}
/* Fit fully, or fill with possible cropping. */
.example--contain { mask-size: contain; }
.example--cover { mask-size: cover; }These examples show documented CSS syntax; they are not independent browser-test results.
How does auto work?
With auto, the browser uses the source image’s intrinsic dimensions or proportions when available. If one dimension is constrained, the other can retain the source’s aspect ratio. For an image source without intrinsic dimensions or proportions, such as a CSS gradient, sizing resolves against the mask positioning area. The contain and cover keywords preserve the source’s aspect ratio; when no intrinsic proportion exists, the mask is sized to the positioning area.
What does a percentage use as its reference?
A percentage is relative to the box chosen by mask-origin, not automatically to the element’s content box. MDN gives padding-box as the default for mask-origin. So mask-size: 50% sets the mask width to half the width of that reference box, with height left at auto. Changing mask-origin can therefore change the rendered size even if the percentage stays the same. The MDN masking guide explains the relationship.
How does sizing work with multiple mask layers?
Comma-separated mask-size values correspond to mask images in order. If there are more size values than mask layers, the extra values are ignored. If there are fewer size values, the list repeats to cover the remaining layers. Check that each value lines up with the intended layer when combining masks.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Why might a mask be cropped or appear unexpectedly sized?
- It is cropped with
cover: the keyword fills the positioning area proportionally, so cropping is possible when the mask and area have different aspect ratios. Usecontainto keep the whole mask visible. - A percentage does not match the element’s apparent dimensions: check which box
mask-originselects; that box supplies the percentage reference. - The mask looks stretched: check whether two explicit dimensions impose an aspect ratio different from the source. Use one dimension or
contain/coverto preserve proportions. - A shorthand changed the size: the
maskshorthand resets omitted longhand properties to their initial values, includingmask-size: auto. See the MDN masking guide. - A value seems to apply to the wrong image: confirm that the comma-separated size list matches the mask-image layer order; excess entries are ignored and missing entries repeat.
Is mask-size supported in current browsers?
MDN marks the property Baseline Widely available and reports availability across browsers since December 2023. This broad status is not a guarantee for every legacy browser or every related masking feature. Check the MDN compatibility data for browser-specific version requirements.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
