嵌入
嵌入-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%)
);