object.style.maskSize = "value"; <'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.
<!doctype html>
<html>
<head>
<style>
div
{
background-color: yellow;
height: calc(100vh - 16px);
mask-image: url(/assets/svg/Happy100.svg);
mask-size: contain;
}
</style>
</head>
<body>
<div>contain</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div
{
background-color: yellow;
height: calc(100vh - 16px);
mask-image: url(/assets/svg/Happy100.svg);
mask-size: cover;
}
</style>
</head>
<body>
<div>cover</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div
{
background-color: yellow;
height: calc(100vh - 16px);
mask-image: url(/assets/svg/Happy100.svg);
mask-size: 100px 50px;
}
</style>
</head>
<body>
<div>length</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div
{
background-color: yellow;
height: calc(100vh - 16px);
mask-image: url(/assets/svg/Happy100.svg);
mask-size: 100% 50%;
}
</style>
</head>
<body>
<div>percentage</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div
{
background-color: yellow;
height: calc(100vh - 37px);
mask-image: url(/assets/svg/Happy100.svg);
}
</style>
</head>
<body>
<button>initial</button>
<button>auto</button>
<button>contain</button>
<button>cover</button>
<button value="100px 50px">length</button>
<button value="100% 50%">percentage</button>
<div>mask-size</div>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
document.querySelector("div").style.maskSize = myproperty;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>