5.8 嵌入

在页面中通常使用<iframe>、<embed>、<video>、<object>标签来嵌入视频、图像、幻灯片等。在Bootstrap 4中不仅可以使用这些标签，还添加了一些相关的样式类，以便在任意设备上能友好地扩展显示这些内容。

下面通过一个嵌入图片的示例来说明。

首先使用一个div包裹插入标签<iframe>，在div中添加.embed-responsive类和.embed-responsive-16by9类。然后直接使用<iframe>标签的src属性引用本地的一张图片即可。

■ .embed-responsive：实现同比例的收缩。

■ .embed-responsive-16by9：定义16:9的长宽比例。还有.embed-responsive-21by9、.embed-responsive-3by4、.embed-responsive-1by1可以选择。

【例5.24】嵌入示例。

在IE 11浏览器中运行结果如图5-28所示。