コンテンツを指定した比率で表示します。
import React from 'react';import * as AspectRatio from '@radix-ui/react-aspect-ratio';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;
任意のカスタム比率を受け入れます。
コマンドラインからコンポーネントをインストールします。
コンポーネントをインポートします。
指定された比率に制限するコンテンツが含まれています。