Components

宽高比

¥Aspect Ratio

按所需比例显示内容。

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

    Accepts any custom ratio.

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

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

结构

¥Anatomy

导入组件。

¥Import the component.

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

API 参考

¥API Reference

¥Root

包含你想要限制为指定比例的内容。

¥Contains the content you want to constrain to a given ratio.

PropTypeDefault
asChild
boolean
false
ratio
number
1