比例

使用生成的伪元素使元素保持您选择的纵横比。 非常适合根据父级的宽度响应地处理视频或幻灯片嵌入。

关于

使用比例辅助工具来管理外部内容（如<iframe>、<embed>、<video> 和 <object>）的纵横比。 这些辅助工具也可以用于任何标准的 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

比例