CSS Masking - mask-size Property

CSS mask-size property in CSS is used to specify the size of a mask image applied to an element using the mask-image property. It allows you to control the dimensions of the mask, determining how it is scaled or displayed within the element.

If you apply the mask shorthand property to an element after setting the mask-size property, the mask-size property will be reset to its default value.

Possible Values

  • contain − Resizes the image to its maximum size while maintaining the original aspect ratio without getting stretched or squished.

  • cover − This value is the opposite of contain. Scales the image to its maximum size while maintaining the aspect ratio, ensuring that the image does not get squished. When the image and container have different dimensions, the image is clipped either on left/right or top/bottom side.

  • <length> − A <length> value adjusts the mask image to the specified dimensions. Negative lengths are not allowed.

  • <percentage> − A <percentage> value adjusts the mask image relative to the dimensions based on a specified percentage of the mask positioning area, determined by the mask-origin property. Negative percentages are not allowed.

  • auto − The auto value adjusts the mask image sizes proportionally in both the horizontal and vertical directions while maintaining its intrinsic proportions.

Applies to

All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements.

Syntax

mask-size: cover |contain | <length> | <percentage> | auto;

The rendered size of the mask image is calculated as follows:

  • If both mask-size components are given and are not auto - The mask image is displayed at the desired size.

  • When the mask-size is set to cover or contain - The image is displayed while preserving its intrinsic proportion at the maximum size within the mask positioning area. When there is no intrinsic proportion in the image, it is displayed at the dimensions of the mask positioning area.

  • If the mask-size is set to auto or auto auto - If an image has intrinsic dimensions, it is rendered at those dimensions; otherwise, it aligns with the mask positioning area. If an image has no dimensions but a proportion, it is rendered as "contain" had been used. If the image has one intrinsic dimension and a proportion, it is rendered using that dimension and the specified proportion. The image has a single intrinsic dimension with no proportion defined, and it aligns with the mask positioning area.

  • If mask-size contains one auto and one non-auto component - For images with intrinsic proportions, render using the specified dimension, calculating the other dimension based on the intrinsic proportion. If there is no intrinsic proportion in the image, use the given dimension for that dimension. For the other dimension, use the image's intrinsic dimension if available. If no intrinsic dimension is available, use the corresponding dimension of the mask positioning area.

CSS mask-size - contain

The following example demonstrates the use of -webkit-mask-size: contain property, where the mask image fits within the container while maintaining its aspect ratio −

<html>
<head>
<style>
   .mask-image-contain {
      width: 200px;
      height: 150px;
      background-image: url(images/pink-flower.jpg);
      background-size: contain;
      -webkit-mask-image: url(images/heart.png);
      -webkit-mask-size: contain;
   }
</style>
</head>
<body>
   <h2>Orignal Image</h2>
   <img src="images/pink-flower.jpg" width="200px" height="200px">
   <h2>mask-size: contain</h2>
   <div class="mask-image-contain"></div>
</body>
</html>

CSS mask-size - cover

The following example demonstrates the use of -webkit-mask-size: cover property, which ensures that the mask image will completely cover the background −

<html>
<head>
<style>
   .mask-image-cover {
      width: 200px;
      height: 200px;
      background-image: url(images/pink-flower.jpg);
      background-size: cover;
      -webkit-mask-image: url(images/heart.png);
      -webkit-mask-size: cover;
   }
</style>
</head>
<body>
   <h2>Orignal Image</h2>
   <img src="images/pink-flower.jpg" width="200px" height="200px">
   <h2>mask-size: cover</h2>
   <div class="mask-image-cover"></div>
</body>
</html>

CSS mask-size - <length>

The following example demonstrates that the -webkit-mask-size: 100px 100px property sets the size of the mask image, using a length value. The mask image will be repeated to cover the entire background −

<html>
<head>
<style>
   .mask-image-length {
      width: 200px;
      height: 200px;
      background-image: url(images/pink-flower.jpg);
      background-size: cover;
      -webkit-mask-image: url(images/heart.png);
      -webkit-mask-size: 100px 100px;
   }
</style>
</head>
<body>
   <h2>Orignal Image</h2>
   <img src="images/pink-flower.jpg" width="200px" height="200px">
   <h2>mask-size: 100px 100px</h2>
   <div class="mask-image-length"></div>
</body>
</html>

CSS mask-size - <percentage>

The following example demonstrates that the -webkit-mask-size: 100% 100% property sets the size of the mask image to cover the entire size of an element −

<html>
<head>
<style>
   .mask-image-length {
      width: 200px;
      height: 200px;
      background-image: url(images/pink-flower.jpg);
      background-size: cover;
      -webkit-mask-image: url(images/heart.png);
      -webkit-mask-size: 100% 100%;
   }
</style>
</head>
<body>
   <h2>Orignal Image</h2>
   <img src="images/pink-flower.jpg" width="200px" height="200px">
   <h2>mask-size: 100% 100%</h2>
   <div class="mask-image-length"></div>
</body>
</html>

CSS mask-size - auto Value

The following example demonstrates how the -webkit-mask-size: auto property will automatically size the mask image to fit within the element −

<html>
<head>
<style>
   .mask-image-auto {
      width: 200px;
      height: 200px;
      background-image: url(images/pink-flower.jpg);
      background-size: cover;
      -webkit-mask-image: url(images/heart.png);
      -webkit-mask-size: auto;
   }
</style>
</head>
<body>
   <h2>Orignal Image</h2>
   <img src="images/pink-flower.jpg" width="200px" height="200px">
   <h2>mask-size: auto</h2>
   <div class="mask-image-auto"></div>
</body>
</html>
Advertisements