--- title: Picture description: "`Picture`は、`picture`要素を使用し、異なる表示やデバイスのシナリオに応じて代替の画像を提供するコンポーネントです。" links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/picture - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-picture--basic --- ```tsx Dragon Ball ``` ## 使い方 ```tsx import { Picture, Source, Image } from "@yamada-ui/react" ``` ```tsx import { Picture, Source, Image } from "@/components/ui" ``` ```tsx import { Picture, Source, Image } from "@workspaces/ui" ``` ```tsx ``` ### sourcesを使う ```tsx ``` ### カスタムメディアクエリを使用する ```tsx ``` ### ソートを無効にする デフォルトでは、ソースの`minW` と `maxW` によってソートされます。このソートを無効にする場合は、`enableSorting`を`false`にします。 ```tsx ``` ## Props ### Picture | Prop | Default | Type | Description | | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `enableSorting` | `true` | `boolean` | If `true`, the sources will be sorted by the `minW` and `maxW` properties. | | `fit` | - | `"-moz-initial" \| "contain" \| "cover" \| "fill" \| "inherit" \| "initial" \| "none" \| "revert-layer" \| "revert" \| "scale-down" ...` | The CSS `object-fit` property. | | `pictureProps` | - | `HTMLStyledProps<"picture">` | The props for the picture element. | | `sources` | - | `PictureSource[]` | The sources for the picture element. | ### Source | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `media` | - | `AnyString \| ThemeTokens["breakpoints"]` | The media query for the source. |