CSS - mask-size Property

Quiz

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.

Syntax

mask-size: auto | size | contain | cover | initial | inherit;

Property Values

Value	Description
auto	The auto value adjusts the mask image sizes proportionally in both the horizontal and vertical directions while maintaining its intrinsic proportions.
length	The length value adjusts the mask image to the specified dimensions. Negative lengths are not allowed.
percentage	The percentage value adjusts the mask image based on a percentage of the mask positioning area defined by the mask-origin property. Negative percentages are not allowed.
contain	It resizes the image to its maximum size while maintaining the original aspect ratio without getting stretched or squished.
cover	This value scales the image to its maximum size while preserving the aspect ratio, clipping it if necessary when dimensions differ from the container.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Mask Size Property

The following examples explain the mask-size property with different values.

Mask Size Property with Contain Value

To scale the mask image to fit within the elements dimensions, preserving the image's aspect ratio, we use the contain value. The entire image will be visible, but there may be empty space around the edges of the element. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-size: contain;
         mask-repeat: no-repeat;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-size Property
   </h2>
   <h4>
      mask-size: contain
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="500" height="300">
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/scenery.jpg" 
   alt="img" width="200" height="150">

</body>

</html>

Mask Size Property with Cover Value

To scale the mask image to cover the entire area of the element, ensuring that the image covers the element completely without stretching, but potentially cropping the image, we use the cover value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-size: cover;
         mask-repeat: no-repeat;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-size Property
   </h2>
   <h4>
      mask-size: cover
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="500" height="400">
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/scenery.jpg" 
   alt="img" width="200" height="150">

</body>

</html>

Mask Size Property with Length Values

To set the size of the mask image, we can specify the size in length units (e.g. px, em, rem etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-repeat: no-repeat;
      }
      
      .ex1 {
         mask-size: 350px;
      }

      .ex2 {
         mask-size: 500px;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-size Property
   </h2>
   <h4>
      mask-size: 350px
   </h4>
   <div class="container ex1">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="500" height="200">
   </div>
   <h4>
      mask-size: 500px
   </h4>
   <div class="container ex2">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="500" height="200">
   </div>
   <h4>
      image used:
   </h4>
   <img src="/css/images/scenery.jpg" 
   alt="img" width="200" height="150">

</body>

</html>

Mask Size Property with Percentage Values

To set the size of the mask image, we can specify the size in percentage values (e.g. 10%) relative to the size of the containing element. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-repeat: no-repeat;
      }
      
      .ex1 {
         mask-size: 50%;
      }

      .ex2 {
         mask-size: 38%;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-size Property
   </h2>
   <h4>
      mask-size: 50%
   </h4>
   <div class="container ex1">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="500" height="100">
   </div>
   <h4>
      mask-size: 38%
   </h4>
   <div class="container ex2">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="500" height="100">
   </div>
   <h4>
      image used:
   </h4>
   <img src="/css/images/scenery.jpg" 
   alt="img" width="200" height="150">

</body>

</html>

Mask Size Property with Auto Value

To let the mask image appear at its original dimensions without any intrinsic scaling, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-size: auto;
         mask-repeat: no-repeat;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-size Property
   </h2>
   <h4>
      mask-size: auto
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="400" height="100">
   </div>
   <h4>
      image used:
   </h4>
   <img src="/css/images/scenery.jpg" 
   alt="img" width="200" height="150">

</body>

</html>

Supported Browsers

Property
mask-size	120	120	53	15.4	106

css_reference.htm

Print Page