组件

纵横比

在期望的比例内显示内容。

import * as React from "react";
import { AspectRatio } from "radix-ui";
import "./styles.css";
const AspectRatioDemo = () => (
<div className="Container">
<AspectRatio.Root ratio={16 / 9}>
<img className="Image" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" />
</AspectRatio.Root>
</div>
);
export default AspectRatioDemo;

特性

    接受任何自定义比例。

安装

从命令行安装组件。

npm install @radix-ui/react-aspect-ratio

解剖

导入组件。

import { AspectRatio } from "radix-ui";
export default () => <AspectRatio.Root />;

API 参考

包含您想要约束为给定比例的内容。

属性类型默认值
asChild
布尔值
false
ratio
数字
1
下一个头像