Mask Size

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> ```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> ```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> ```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" />