当前位置：首页 > news >正文

Bootstrap-HTML（五）图像基础样式

news 2025/7/12 14:43:47

Bootstrap-HTML（五）图像基础样式

前言
一、圆角图片
二、圆形图片
三、缩略图
四、对齐图像
五、图片居中
六、响应式图片

前言

在之前的博客中，我们已经详细了解了 Bootstrap5 中诸多实用的组件和样式类，比如徽章与表格等，它们在网页布局和内容展示方面发挥着重要作用。
在这篇文章里，我们将深入探讨 Bootstrap5 中图像相关的样式类，看看如何利用它们打造出更美观、更符合网页设计需求的图片展示效果。

一、圆角图片

在网页设计中，有时我们希望图片呈现出圆角的效果，使页面看起来更加柔和、美观。Bootstrap5 中提供了 .rounded 类来轻松实现这一需求。只需要在 <img> 标签上添加 .rounded 类，就能为图像添加圆角，示例代码如下：

我们以这张照片为例

在这里插入图片描述

使用方法

<img src="1.png" class="rounded">

<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../图片/山.jpg" class="rounded">
</div>
</body></html>

效果图
在这里插入图片描述

二、圆形图片

如果想要把椭圆形的图片设置成圆形展示，.rounded-circle 类就派上用场了。使用这个类可以将图片变成圆形，代码示例如下：

使用方法

<img src="1.png" class="rounded-circle">

<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../图片/山.jpg" class="rounded-circle"></div>
</body></html>

在这里插入图片描述

三、缩略图

当需要展示图片缩略图且希望图片带有边框时，可以使用 .img-thumbnail 类。它能为图片添加合适的边框，营造出缩略图的效果，示例如下：

<img src="1.png" class="img-thumbnail">

<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../图片/缩略图示例图.jpg" class="img-thumbnail"></div>
</body></html>

在这里插入图片描述

四、对齐图像

对于图像在页面中的对齐方式，Bootstrap5 也提供了便捷的样式类。使用 .float-start 类可以将图像向左浮动，让其靠页面左侧排列；而使用 .float-end 类则能使图像向右浮动，靠页面右侧排列，示例代码如下：

我们通过两张不同图片展示左右对齐效果
向左浮动使用方法

<img src="1.png" class="float-start">

<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../图片/左对齐示例图.jpg" class="float-start"></div>
</body></html>

在这里插入图片描述

向右浮动使用方法

<img src="2.png" class="float-end">

<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../图片/右对齐示例图.jpg" class="float-end"></div>
</body></html>

在这里插入图片描述

五、图片居中

要让图片在页面中居中对齐，需要同时使用 .mx-auto（margin:auto）和 .d-block（display:block）这两个类，示例如下：
使用方法

<img src="1.png" class="mx-auto d-block">

<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../图片/山.jpg" class="mx-auto d-block"></div>
</body></html>

在这里插入图片描述

六、响应式图片

由于图像有着各种各样的尺寸，为了让它们能根据屏幕的大小自动适应，Bootstrap5 提供了 .img-fluid 类。将这个类添加到 <img> 标签中，它主要会把样式 max-width: 100%; 和 height: auto; 应用于图像，使得图像可以很好地缩放以适合包含元素，示例如下：
使用方法

<img src="1.png" class="img-fluid">

<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class=""><img src="../图片/响应式示例图.jpg" class="img-fluid"></div>
</body></html>