Bootstrap5 响应式图片和视频

使用 Bootstrap5 样式化图像

图像在现代网页设计中非常常见。 因此，样式化图像并将其正确放置在网页上对于改善用户体验非常重要。

使用 Bootstrap5 内置类，可以轻松设置图像样式，例如制作圆角或圆形图像，或赋予它们类似缩略图的效果。

<img src="demo_source/avatar.svg" class="rounded" alt="Rounded Image">
<img src="demo_source/avatar.svg" class="rounded-circle" alt="Circular Image">
<img src="demo_source/avatar.svg" class="img-thumbnail" alt="Thumbnail Image">

尝试一下

图片效果如下

创建响应式图像和视频

使用 Bootstrap5，可以使图像具有响应性。 只需将 .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">

尝试一下

注意 ：在制作响应式布局时，要考虑使图像也具有响应性，否则如果图像宽度在任何情况下都大于父元素的宽度，它将溢出并可能破坏网页布局。

还可以使嵌入在网页中的视频或幻灯片具有响应性，而不会影响其原始纵横比。 为此，将任何嵌入元素（如 <iframe> 或 <video>）放在 <div> 元素中，并应用类 .embed-responsive 和纵横比类，例如 .embed-responsive-16by9。

可以选择在嵌入元素上应用显式后代类 .embed-responsive-item 从而匹配其他属性的样式。 这是一个例子：

<!-- 21:9 aspect ratio -->
<div class="ratio ratio-21x9">
    <iframe src="demo_source/movie.mp4" title="bootstrap5 视频" allowfullscreen></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="ratio ratio-16x9">
    <iframe src="demo_source/movie.mp4" title="bootstrap5 视频" allowfullscreen></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="ratio ratio-4x3">
    <iframe src="demo_source/movie.mp4" title="bootstrap5 视频" allowfullscreen></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="ratio ratio-1x1">
    <iframe src="demo_source/movie.mp4" title="bootstrap5 视频" allowfullscreen></iframe>
</div>

尝试一下

在上面的示例中，我们使用类 .ratio-21x9、.ratio-16x9、 .ratio-4x3 和 .ratio-1x1 以及父级元素上的基类 .ratio 创建了具有 4 个不同纵横比（21:9、16:9、4:3 和 1:1）的 4 个响应式嵌入视频 。

提示 ：图像的纵横比描述了其宽度和高度之间的比例关系。 两种常见的视频纵横比是 16:9 和 4:3。

图像的水平对齐

我们可以使用父容器上的文本对齐类（例如 .text-center 和 .text-end ）将内嵌图像水平居中和向右对齐。 还可以使用 .float-start 和 .float-end 类在较大的框内左右对齐图像。

但是，要居中对齐块级图像，需要使用 .mx-auto margin 实用程序类。 让我们尝试以下示例来了解它的实际工作原理：

<!-- Center alignment using text alignment classes -->
<div class="text-center">
    <img src="demo_source/avatar.svg" alt="Sample Image">
</div>

<!-- Right alignment using text alignment classes -->
<div class="text-end">
    <img src="demo_source/avatar.svg" alt="Sample Image">
</div>

<!-- Horizontal alignment using float classes -->
<div class="clearfix">
    <img src="demo_source/avatar.svg" class="float-start" alt="Sample Image">
    <img src="demo_source/avatar.svg" class="float-end" alt="Sample Image">
</div>

<!-- Center alignment of block-level image using auto margin -->
<div>
    <img src="demo_source/avatar.svg" class="d-block mx-auto" alt="Sample Image">
</div>

尝试一下