Bootstrap 5 图像

Bootstrap 5 图像标签在网页上插入图像以供参考和信息。 从技术上讲，图像不像文本和表格数据那样放置在 Web 应用程序中。 图像路径使用 <img> 标签和“href”元素放置在网页上。 在线网站的图像标签没有结束标签。

圆角图像

Bootstrap 5 图像函数将图像放置为圆角形状。 Bootstrap 5 图像函数将“rounded”类与图像标签一起使用。 我们可以使用 class = "rounded" 类来创建圆角图像。

语法

以下语法显示网页上的圆角图像。

• 带有“src”和“class”元素的 <img> 标签必须要求在页面中设置图像。
• 高度和宽度元素是必需的，但不是必要的。

示例

以下示例在容器标签中使用圆角图像。 我们可以看到放置在一个页面中的不同尺寸的图像。

输出

以下输出显示了两个具有圆角的不同尺寸的图像。

圆形图像

Bootstrap 5 图像函数将图像放置为圆形边框。 Bootstrap 5 图像函数将“circle”类与图像标签一起使用。 我们可以使用 class = "rounded-circle" 类来创建圆形图像。

语法

以下语法显示网页上的圆角图像。

• 如果图像的高度和宽度相同，则形状显示为圆形。
• 如果图像的高度和宽度不相同，则形状显示为椭圆形。

示例

以下示例在容器标签中使用圆形图像。 我们可以看到放置在一个页面中的不同尺寸和圆形形状的图像。

输出

以下输出显示了具有不同尺寸和形状（带有高度和宽度）的图像。

缩略图图像

Bootstrap 5 图像函数放置带有边框的方形图像。 Bootstrap 5 图像函数将缩略图类与图像标签一起使用。 我们可以使用 class = "img-thumbnail" 类来创建时尚的方形图像。

语法

以下语法显示网页上的缩略图图像。

示例

以下示例在容器标签中使用带有和不带缩略图的图像。 我们可以看到缩略图图像和默认图像之间的区别。

输出

以下输出显示了网页上默认图像和缩略图图像的高度和宽度。

对齐图像

Bootstrap 5 图像函数在网页的所需对齐方式中显示图像。 图像可以放置在页面的开始或结束位置。 我们可以使用“float-start”和“float-end”类分别用于页面的开始和结束位置。

语法

以下语法显示了网页上图像的起始对齐方式。

以下语法显示了网页上图像的结束对齐方式。

示例

以下示例在容器标签中使用起始和结束对齐图像。

输出

以下输出显示了具有所需高度和宽度的图像在网页上的起始和结束对齐方式。

居中图像

Bootstrap 5 图像函数在网页的中心对齐方式中显示图像。 图像使用这两个类同时放置在容器类或 <div> 标签的中心点。 我们可以使用“mx-auto”和“d-block”自动设置边距并将图像显示为块。

语法

以下语法显示了网页上的中心对齐图像。

示例

以下示例在容器标签中使用图像的居中对齐方式。

输出

以下输出显示了具有所需高度和宽度的图像在网页上的中心对齐方式。

响应式图像

图像存在各种尺寸，它们必须适合所有尺寸的设备。 响应式图像会立即更改屏幕的尺寸。 通过将“img-fluid”类添加到 <img> 标签来创建响应式图像。 然后，图像将按比例缩放到其父级。 “img-fluid”类将图像的最大宽度设置为高达 100%，高度设置为“auto”值。

语法

以下语法显示了网页上的响应式图像。

示例

以下示例在屏幕上放置了两个具有不同高度和宽度的图像。 响应式图像类有助于在所有尺寸的设备中进行设置。 我们可以使用没有高度和宽度的图像标签来创建响应式图像

输出

以下输出显示了设置为所有屏幕尺寸的响应式图像。

结论

图像对于以有趣的格式在网页上显示数据至关重要。 Bootstrap 5 图像函数提供了几个类来放置图像并在 Web 应用程序中使其看起来更具吸引力。 Bootstrap 5 图像类有助于根据需要和用户交互在网页上设置图片。