宽高比 · Bootstrap 6.0 中文文档

类名	样式
.ratio-auto	--bs-ratio: auto;
.ratio-1x1	--bs-ratio: 1 / 1;
.ratio-4x3	--bs-ratio: 4 / 3;
.ratio-16x9	--bs-ratio: 16 / 9;
.ratio-21x9	--bs-ratio: 21 / 9;

使用比例工具来管理内容（如<iframe>、<embed>、<video>和<object>）的宽高比。这些辅助工具同样可以用于任何标准的 HTML 子元素（例如 <div> 或 <img>）。可以通过 Sass 变量或工具 API 自定义可用的宽高比。

专业提示！ 你不需要 frameborder="0" 在你的 <iframe>当我们为你覆盖它时重启.

示例

将你的比例工具类添加到你想要修改的元素上，比如 <iframe>、<video>，或者像 <div> 这样的不太语义化的元素。比例工具类也可以很好地与任何宽度工具类配合使用，如下所示。你可以使用 Sass 变量或工具类 API 自定义可用的纵横比。

HTML

<iframe class="w-100 ratio-16x9" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>

将 .ratio-* 类替换为不同的纵横比。

自动

1×1

4×3

16×9

21×9

HTML

<div class="ratio-auto">
  <div>Auto</div>
</div>
<div class="w-25 ratio-1x1">
  <div>1×1</div>
</div>
<div class="w-50 ratio-4x3">
  <div>4×3</div>
</div>
<div class="w-75 ratio-16x9">
  <div>16×9</div>
</div>
<div class="w-100 ratio-21x9">
  <div>21×9</div>
</div>

自定义比例

要设置自定义比率，请覆盖 --bs-ratio 在任何 .ratio-* 元素。

2×1

HTML

<div class="w-25 ratio-auto" style="--bs-ratio: 2 / 1;">
  <div>2×1</div>
</div>

你也可以通过在你自己的 CSS 中覆盖相同的自定义属性来更改断点处的比例。

SCSS

          .custom-ratio {
  --bs-ratio: 4 / 3;

  @include media-breakpoint-up(md) {
    --bs-ratio: 2 / 1;
  }
}

然后将该类应用到你的标记中：

HTML

          <div class="ratio-auto custom-ratio">
  <div>4×3, then 2×1</div>
</div>

CSS

Sass map

在 _config.scss 中，你可以更改想要使用的纵横比。这里是我们的默认 $aspect-ratios 映射。根据需要修改映射并重新编译你的 Sass 以使用它们。

scss/_config.scss

$aspect-ratios: ();
// stylelint-disable-next-line scss/dollar-variable-default
$aspect-ratios: defaults(
  (
    "auto": auto,
    "1x1": #{"1 / 1"},
    "4x3": #{"4 / 3"},
    "16x9": #{"16 / 9"},
    "21x9": #{"21 / 9"}
  ),
  $aspect-ratios
);

Sass 工具 API

宽高比工具在我们的工具 API 中的 scss/_utilities.scss 声明。了解如何使用工具 API。

scss/_utilities.scss

"aspect-ratio-attr": (
  selector: "attr-includes",
  class: "ratio-",
  property: aspect-ratio,
  values: var(--ratio),
),
"aspect-ratio": (
  property: --ratio,
  class: ratio,
  values: $aspect-ratios
),