The mask-size CSS property specifies the size of the mask layer images.
CSS
JS
object.style.maskSize = "value";
Values
<'mask-size'> = <bg-size>#
<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
auto
Automatically specified by the user agent.
cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
contain
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
Initial
auto
contain
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask-image: url(/assets/svg/HappyFace.svg);
mask-size: contain;
}
</style>
</head>
<body>
<div>contain</div>
</body>
</html>
cover
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask-image: url(/assets/svg/HappyFace.svg);
mask-size: cover;
}
</style>
</head>
<body>
<div>cover</div>
</body>
</html>
length
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask-image: url(/assets/svg/HappyFace.svg);
mask-size: 25px 50px;
}
</style>
</head>
<body>
<div>length</div>
</body>
</html>
percentage
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask-image: url(/assets/svg/HappyFace.svg);
mask-size: 25% 50%;
}
</style>
</head>
<body>
<div>percentage</div>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask-image: url(/assets/svg/HappyFace.svg);
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("div")[0].style.maskSize = value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="auto">
<input onmouseover="mouseover(value)" type="button" value="contain">
<input onmouseover="mouseover(value)" type="button" value="cover">
<button onmouseover="mouseover(value)" value="25px 50px">length</button>
<button onmouseover="mouseover(value)" value="25% 50%">percentage</button>
<div>mask-size</div>
</body>
</html>
Internal
External