Bootstrap-HTML（五）图像根本样式

---

媒介

• 在之前的博客中，我们已经详细相识了 Bootstrap5 中诸多实用的组件和样式类，好比徽章与表格等，它们在网页结构和内容展示方面发挥着告急作用。
  
• 在这篇文章里，我们将深入探究 Bootstrap5 中图像干系的样式类，看看怎样使用它们打造出更雅观、更符合网页筹划需求的图片展示效果。
  

---

一、圆角图片

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

   我们以这张照片为例
  

使用方法

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

复制代码

1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5.   <!-- 最新的 Bootstrap5 核心 css 文件 -->
6.   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
7.   <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
8.   <script src="../bootstrap/js/bootstrap.min.js"></script>
9. </head>
11. <body>
12.   <div class="">
13.     <img src="../图片/山.jpg" class="rounded">
14. </div>
15. </body>
17. </html>

复制代码

效果图

二、圆形图片

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

使用方法

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

复制代码

1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5.   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
6.   <script src="../bootstrap/js/bootstrap.min.js"></script>
7. </head>
9. <body>
10.   <div class="">
11.     <img src="../图片/山.jpg" class="rounded-circle">
12.   </div>
13. </body>
15. </html>

复制代码

三、缩略图

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

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

复制代码

1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5.   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
6.   <script src="../bootstrap/js/bootstrap.min.js"></script>
7. </head>
9. <body>
10.   <div class="">
11.     <img src="../图片/缩略图示例图.jpg" class="img-thumbnail">
12.   </div>
13. </body>
15. </html>

复制代码

四、对齐图像

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

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

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

复制代码

1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5.   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
6.   <script src="../bootstrap/js/bootstrap.min.js"></script>
7. </head>
9. <body>
10.   <div class="">
11.     <img src="../图片/左对齐示例图.jpg" class="float-start">
12.   </div>
13. </body>
15. </html>

复制代码

• 向右浮动使用方法
  

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

复制代码

1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5.   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
6.   <script src="../bootstrap/js/bootstrap.min.js"></script>
7. </head>
9. <body>
10.   <div class="">
11.     <img src="../图片/右对齐示例图.jpg" class="float-end">
12.   </div>
13. </body>
15. </html>

复制代码

五、图片居中

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

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

复制代码

1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5.   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
6.   <script src="../bootstrap/js/bootstrap.min.js"></script>
7. </head>
9. <body>
10.   <div class="">
11.     <img src="../图片/山.jpg" class="mx-auto d-block">
12.   </div>
13. </body>
15. </html>

复制代码

六、相应式图片

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

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

复制代码

1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5.   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
6.   <script src="../bootstrap/js/bootstrap.min.js"></script>
7. </head>
9. <body>
10.   <div class="">
11.     <img src="../图片/响应式示例图.jpg" class="img-fluid">
12.   </div>
13. </body>
15. </html>

复制代码

---

非常感谢您的阅读，喜好的话记得三连哦

[table][/table]