比率

生成された疑似要素を使用して、選択したアスペクト比を要素に維持させます。親要素の幅に基づいた、ビデオやスライドショーの埋め込みをレスポンシブに処理するのに最適です。

概要

<iframe>、<embed>、<video>、<object> などの外部コンテンツのアスペクト比を管理するには、ratio ヘルパーを使用します。このヘルパーは、標準的な HTML 子要素 (例: <div> や <img>) にも使用できます。スタイルは親の .ratio クラスから直接子に適用されます。

iframe に frameborder="0" を含める必要はありません。

例

結果

読み込み中...

ライブエディタ

import Ratio from 'react-bootstrap/Ratio'; function BasicExample() { return ( <div style={{ width: 660, height: 'auto' }}> <Ratio aspectRatio="16x9"> <embed type="image/svg+xml" src="/img/TheresaKnott_castle.svg" /> </Ratio> </div> ); } export default BasicExample;

import Ratio from 'react-bootstrap/Ratio';

function BasicExample() {
  return (
    <div style={{ width: 660, height: 'auto' }}>
      <Ratio aspectRatio="16x9">
        <embed type="image/svg+xml" src="/img/TheresaKnott_castle.svg" />
      </Ratio>
    </div>
  );
}

export default BasicExample;

アスペクト比

アスペクト比は aspectRatio を使用してカスタマイズできます。既定では、次の aspectRatio 値が提供されます。

結果

読み込み中...

ライブエディタ

import Ratio from 'react-bootstrap/Ratio'; function DefaultExample() { return ( <> {['1x1', '4x3', '16x9', '21x9'].map((ratio) => ( <Ratio key={ratio} aspectRatio={ratio}> <div>{ratio}</div> </Ratio> ))} </> ); } export default DefaultExample;

import Ratio from 'react-bootstrap/Ratio';

function DefaultExample() {
  return (
    <>
      {['1x1', '4x3', '16x9', '21x9'].map((ratio) => (
        <Ratio key={ratio} aspectRatio={ratio}>
          <div>{ratio}</div>
        </Ratio>
      ))}
    </>
  );
}

export default DefaultExample;

カスタム

上記の定義済みの値を使用するのではなく、aspectRatio に数値を渡すことでカスタムアスペクト比を作成します。カスタム比率を定義するには、分数またはパーセンテージを使用できます。

結果

読み込み中...

ライブエディタ

import Ratio from 'react-bootstrap/Ratio'; function CustomExample() { return ( <> <Ratio aspectRatio={1 / 2}> <div>2x1</div> </Ratio> <Ratio aspectRatio={50}> <div>2x1</div> </Ratio> </> ); } export default CustomExample;

import Ratio from 'react-bootstrap/Ratio';

function CustomExample() {
  return (
    <>
      <Ratio aspectRatio={1 / 2}>
        <div>2x1</div>
      </Ratio>
      <Ratio aspectRatio={50}>
        <div>2x1</div>
      </Ratio>
    </>
  );
}

export default CustomExample;

API

Ratio