import { AspectRatio, Center } from "@chakra-ui/react"
const Demo = () => {
return (
<AspectRatio bg="bg.muted" ratio={2 / 1}>
<Center fontSize="xl">2 / 1</Center>
</AspectRatio>
)
}
用法
¥Usage
import { AspectRatio } from "@chakra-ui/react"<AspectRatio>
<iframe
title="naruto"
src="https://www.youtube.com/embed/QhBnZ6NPOY0"
allowFullScreen
/>
</AspectRatio>示例
¥Examples
图片
¥Image
以下是如何嵌入宽高比为 4 x 3 的图片。
¥Here's how to embed an image that has a 4 by 3 aspect ratio.
import { AspectRatio, Image } from "@chakra-ui/react"
const Demo = () => {
return (
<AspectRatio maxW="400px" ratio={4 / 3}>
<Image src="https://bit.ly/naruto-sage" alt="naruto" objectFit="cover" />
</AspectRatio>
)
}
视频
¥Video
要嵌入具有特定宽高比的视频，请使用 iframe，并将 src 指向视频链接。
¥To embed a video with a specific aspect ratio, use an iframe with src pointing
to the link of the video.
import { AspectRatio } from "@chakra-ui/react"
const Demo = () => {
return (
<AspectRatio maxW="560px" ratio={1}>
<iframe
title="naruto"
src="https://www.youtube.com/embed/QhBnZ6NPOY0"
allowFullScreen
/>
</AspectRatio>
)
}
谷歌地图
¥Google Map
以下是如何使用 AspectRatio 嵌入响应式 Google 地图。
¥Here's how to embed a responsive Google map using AspectRatio.
import { AspectRatio } from "@chakra-ui/react"
const Demo = () => {
return (
<AspectRatio ratio={16 / 9}>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3963.952912260219!2d3.375295414770757!3d6.5276316452784755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x103b8b2ae68280c1%3A0xdc9e87a367c3d9cb!2sLagos!5e0!3m2!1sen!2sng!4v1567723392506!5m2!1sen!2sng" />
</AspectRatio>
)
}
响应式
¥Responsive
以下是将响应式宽高比应用于框的示例。
¥Here's an example of applying a responsive aspect ratio to a box.
import { AspectRatio } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
export const AspectRatioResponsive = () => (
<AspectRatio maxWidth="300px" ratio={{ base: 1, md: 16 / 9 }}>
<DecorativeBox>Box</DecorativeBox>
</AspectRatio>
)
属性
¥Props
这些属性可以传递给 AspectRatio 组件。
¥These props can be passed to the AspectRatio component.
| Prop | Default | Type |
|---|---|---|
ratio | ConditionalValue<number> | undefinedThe aspect ratio of the Box. Common values are: `21/9`, `16/9`, `9/16`, `4/3`, `1.85/1` | |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |