Bootstrap 简明教程

Bootstrap - Ratio

本章讨论纵横比。在 Bootstrap 中，纵横比用于保持一个响应式元素的比例，例如图像或视频，相对于其父容器。它使用 .ratio 类以及表示所需纵横比的修饰符类来指定。

This chapter discusses about the aspect ratio. In Bootstrap, aspect ratio is used to maintain the proportions of a responsive element, such as an image or video, relative to its parent container. It is specified using the .ratio class along with a modifier class that represents the desired aspect ratio.

To manage the aspect ratios of external content like <iframe>*s, *<embed>*s, *<video>*s, and *<object>*s, use the *ratio-* class.
The ratio helper can also be used on standard HTML child element, such as a <div> or <img>
The styles are applied from the parent .ratio class directly to the child element.
The * in the aspect ratio modifier class can be replaceable with: ratio-21x9: creates a responsive element with a 21:9 aspect ratio ratio-16x9: creates a responsive element with a 16:9 aspect ratio ratio-4x3: creates a responsive element with a 4:3 aspect ratio ratio-1x1: creates a responsive element with a 1:1 aspect ratio

以下是如何使用 <iframe> 元素纵横比的一个示例。在这里，我们使用 16x9 的纵横比：

Here’s an example of how aspect ratios are used with the <iframe> element. Here we are using the 16x9 aspect ratio:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Ratio</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>

    <body>
        <h2 class="text-success text-center">
            Aspect Ratio 16x9
        </h2>
        <hr>
        <div class="ratio ratio-16x9">
            <iframe src="https://www.youtube.com/embed/4PWVFBiFVVU"
                    title="YouTube video" allowfullscreen>
            </iframe>
        </div>
    </body>
</html>

以下是如何使用 <iframe> 元素纵横比的一个示例。在这里，我们使用 21x9 的纵横比：

Here’s an example of how aspect ratios are used with the <iframe> element. Here we are using the 21x9 aspect ratio:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Ratio</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>

    <body>
        <h2 class="text-success text-center">
            Aspect Ratio - 21x9
        </h2>
        <hr>
        <div class="ratio ratio-21x9">
            <iframe src="https://www.youtube.com/embed/4PWVFBiFVVU"
                    title="YouTube video" allowfullscreen>
            </iframe>
        </div>
    </body>
</html>

Custom Ratios

在 Bootstrap 中，自定义纵横比允许您使用 CSS 和 JavaScript 的组合为响应式元素定义自己的纵横比。

In Bootstrap, a custom ratio allows you to define your own aspect ratio for a responsive element using a combination of CSS and JavaScript.

如果您有内置纵横比修饰类所无法覆盖的特定纵横比，这将很有用。下面的示例通过设置 --bs-aspect-ratio: 50% * on the *.ratio 来演示。

This can be useful if you have a specific aspect ratio that is not covered by the built-in aspect ratio modifier classes. Following example demonstrates by setting --bs-aspect-ratio: 50% * on the *.ratio.

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

<!DOCTYPE html>
<html lang="en">

  <head>
      <title>Bootstrap - Helper - Ratio</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>

  <body>
	  <h1 class="text-success text-center">
		  Ratio
	  </h1>
	  <hr>
      <div class="text-center">
        <h2 class="text-success">Bootstrap 5 Custom ratios</h2>
      </div>
      <br>
      <div class="ratio" style="--bs-aspect-ratio: 10%;">
        <div class="bg-success"><h1>success</h1></div>
      </div>
      <div class="ratio" style="--bs-aspect-ratio: 30%;">
      <div class="bg-secondary"><h1>secondary</h1></div>
    </div>
  </body>
</html>