嵌入

嵌入-Bootstrap 5和Material Design 2.0

根据父对象的宽度创建自适应视频或幻灯片嵌入，方法是创建一个 可在任何设备上缩放的固有比率。

基本例子

使用比率助手来管理外部内容的长宽比，例如 <iframe>s, <embed>s, <video>s, and <object>s.这些帮助程序还可用于任何标准HTML子级 元素（例如 <div> 要么 <img>).应用样式 从父 .ratio 类直接到子级。

将任何嵌入（例如＆lt; iframe＆gt; ）嵌入到父元素中， .ratio 和一个宽高比类。直接子元素是自动的 的大小要感谢我们的通用选择器 .ratio＆gt;* 。 


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

长宽比

可以使用修饰符类自定义长宽比。默认情况下，以下比率类 提供：


          <!-- 21:9 aspect ratio -->
          <div class="ratio ratio-21x9">
            <div>21x9</div>
          </div>

          <!-- 16:9 aspect ratio -->
          <div class="ratio ratio-16x9">
            <div>16x9</div>
          </div>

          <!-- 4:3 aspect ratio -->
          <div class="ratio ratio-4x3">
            <div>4x3</div>
          </div>

          <!-- 1:1 aspect ratio -->
          <div class="ratio ratio-1x1">
            <div>1x1</div>
          </div>

在 _variables.scss 中，您可以更改要使用的宽高比。这是 $ aspect-ratios 地图的示例：


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