在期望的比例内显示内容。
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;
接受任何自定义比例。
从命令行安装组件。
导入组件。
包含您想要约束为给定比例的内容。