Bootstrap - 比率

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

要管理<iframe>、<embed>、<video>和<object>等外部内容的宽高比，请使用ratio-*类。
比例助手还可以用在标准 HTML 子元素上，例如<div>或<img>
样式从父.ratio类直接应用于子元素。
宽高比修饰符类中的 *可以替换为：
- ratio-21x9：创建长宽比为 21:9 的响应式元素
- ratio-16x9：创建长宽比为 16:9 的响应式元素
- ratio-4x3：创建长宽比为 4:3 的响应式元素
- ratio-1x1：创建长宽比为 1:1 的响应式元素

以下是如何将纵横比与 <iframe> 元素一起使用的示例。这里我们使用 16x9 的宽高比：

例子

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

<!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 的宽高比：

例子

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

<!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>

定制比率

在 Bootstrap 中，自定义比例允许您使用 CSS 和 JavaScript 的组合来定义自己的响应式元素的宽高比。

如果您具有内置宽高比修饰符类未涵盖的特定宽高比，这可能会很有用。以下示例通过在.ratio上设置--bs-aspect-ratio: 50%进行演示。

例子

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

<!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>