# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/mask-size.mdx

import maskImg from "@/docs/img/mask.png";
import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
import { Stripes } from "@/components/stripes.tsx";

export const title = "mask-size";
export const description = "Utilities for controlling the size of an element's mask image.";

<ApiTable
  rows={[
    ["mask-auto", "mask-size: auto;"],
    ["mask-cover", "mask-size: cover;"],
    ["mask-contain", "mask-size: contain;"],
    ["mask-size-(<custom-property>)", "mask-size: var(<custom-property>);"],
    ["mask-size-[<value>]", "mask-size: <value>;"],
  ]}
/>

## Examples

### Filling the container

Use the `mask-cover` utility to scale the mask image until it fills the mask layer, cropping the image if needed:

<Figure>

<Example>
  {
    <Stripes border className="mx-auto h-48 w-96 overflow-hidden rounded-lg sm:w-96">
      <div
        className="h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat mask-cover mask-center"
        style={{ maskImage: `url(${maskImg.src})` }}
      ></div>
    </Stripes>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-cover] -->
<div class="mask-cover mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Filling without cropping

Use the `mask-contain` utility to scale the mask image to the outer edges without cropping or stretching:

<Figure>

<Example>
  {
    <Stripes border className="mx-auto h-48 w-96 overflow-hidden rounded-lg sm:w-96">
      <div
        className="h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat mask-contain mask-center mask-no-repeat"
        style={{ maskImage: `url(${maskImg.src})` }}
      ></div>
    </Stripes>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-contain] -->
<div class="mask-contain mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Using the default size

Use the `mask-auto` utility to display the mask image at its default size:

<Figure>

<Example>
  {
    <Stripes border className="mx-auto h-48 w-96 overflow-hidden rounded-lg sm:w-96">
      <div
        className="h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat mask-auto mask-center mask-no-repeat"
        style={{ maskImage: `url(${maskImg.src})` }}
      ></div>
    </Stripes>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-auto] -->
<div class="mask-auto mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="mask-size" value="auto_100px" name="mask image size" variable="mask-size" />

### Responsive design

<ResponsiveDesign property="mask-size" defaultClass="mask-auto" featuredClass="mask-contain" />