Bootstrap5 Ratios(比率)

半兽人 发表于: 2020-07-17   最后更新时间: 2021-04-16 10:12:08  
{{totalSubscript}} 订阅,834 游览

关于 Ratios(比率)

使用比率帮助器来管理外部内容的长宽比,例如<iframe><embed><video>,和<object>。 还可用于任何标准HTML子元素(例如,<div><img>)。 样式是从父级.ratio类直接应用于子级的。

例子

.ratio和长宽比类将所有嵌入的内容(如<iframe>)包裹在父元素中。由于我们的通用选择器.ratio > *,直接的子元素的大小会自动调整。

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

在线运行

Aspect ratios

Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

在线运行

Custom ratios

Each .ratio-* class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part.

For example, to create a 2x1 aspect ratio, set --bs-aspect-ratio: 50% on the .ratio.

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

在线运行

This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}
<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

在线运行

Sass map

Within _variables.scss, you can change the aspect ratios you want to use. Here’s our default $ratio-aspect-ratios map. Modify the map as you like and recompile your Sass to put them to use.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);


您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容



提问