Components

长宽比

在所需比例内显示内容。

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;

Features

    接受任何自定义比例。

安装

通过命令行安装该组件。

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

结构

导入组件。

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

API 参考

包含您要限制在给定比例内的内容。

PropTypeDefault
asChild
boolean
false
ratio
number
1