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 图像样式


创建响应式图像和视频

使用 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>

尝试一下

查看笔记