Bootstrap 图像
在本教程中，您将学习如何设置图像样式，以及如何使用 Bootstrap 创建响应式图像和视频。
使用 Bootstrap 设置图像样式
图像在现代网页设计中非常常见。 因此，设置图像样式并将其正确放置在网页上对于改善用户体验非常重要。
使用 Bootstrap 内置类，您可以轻松地设置图像样式，例如制作圆角或圆形图像，或赋予它们像缩略图一样的效果。
<img src="images/avatar.svg" class="rounded" alt="Rounded Image">
<img src="images/avatar.svg" class="rounded-circle" alt="Circular Image">
<img src="images/avatar.svg" class="img-thumbnail" alt="Thumbnail Image">— 上面示例的输出将如下所示：
创建响应式图像和视频
使用 Bootstrap，您也可以使图像响应。 只需将类 .img-fluid 添加到 <img> 标记。 此类主要将样式 max-width: 100%; 和 height: auto; 应用于图像，以便它很好地缩放以适合包含元素 — 如果图像的宽度大于包含元素本身。 查看以下示例以了解其工作原理：
<img src="images/kites.jpg" class="img-fluid" alt="Flying Kites">
<img src="images/sky.jpg" class="img-fluid" alt="Cloudy Sky">
<img src="images/balloons.jpg" class="img-fluid" alt="Hot Air Balloons">注意： 在制作响应式布局时，请考虑让您的图片也响应式，否则如果图片宽度大于父元素的宽度，无论如何都会溢出并可能破坏您的网页布局。
您还可以使嵌入网页的 video 或幻灯片具有响应性，而不会影响其原始纵横比。 为此，将任何嵌入（如 <iframe> 或 <video>）包装在 <div> 元素中，并应用类 .embed-responsive 和纵横比类（如 .embed-responsive-16by9）。
您可以选择在嵌入元素上应用显式后代类 .embed-responsive-item 以匹配其他属性的样式。 这是一个例子：
<!-- 21:9 纵横比 -->
<div class="ratio ratio-21x9">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
<!-- 16:9 纵横比 -->
<div class="ratio ratio-16x9">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
<!-- 4:3 纵横比 -->
<div class="ratio ratio-4x3">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
<!-- 1:1 纵横比 -->
<div class="ratio ratio-1x1">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>在上面的示例中，除了包装器元素上的基类 .ratio 之外，我们还分别使用类 .ratio-21x9, .ratio-16x9, .ratio-4x3, 和 .ratio-1x1 创建了 4 个具有 4 个不同纵横比 (21:9, 16:9, 4:3, 和 1:1) 的响应式嵌入式视频。
提示：图像的纵横比描述了其宽度和高度之间的比例关系。 两种常见的视频宽高比是 16:9 和 4:3。
图像的水平对齐
您可以使用父容器上的 文本对齐类 如 .text-center 和 .text-end 将内联图像水平居中和右对齐。 您还可以使用类 .float-start 和 .float-end 在较大的框中将图像左右对齐。
但是，要居中对齐块级图像，您需要使用 .mx-auto 边距实用程序类。 让我们试试下面的例子来了解它是如何工作的：
<!-- 使用文本对齐类居中对齐 -->
<div class="text-center">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<!-- 使用文本对齐类右对齐 -->
<div class="text-end">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<!-- 使用浮点类进行水平对齐 -->
<div class="clearfix">
<img src="images/avatar.svg" class="float-start" alt="Sample Image">
<img src="images/avatar.svg" class="float-end" alt="Sample Image">
</div>
<!-- 使用自动边距使块级图像居中对齐 -->
<div>
<img src="images/avatar.svg" class="d-block mx-auto" alt="Sample Image">
</div>