副队长BootStrap5探究(5)--图片 Image

点此查看 所有教程、项目、源码导航

文章目录

[1. 开篇介绍与环境引入](#1. 开篇介绍与环境引入)
- [1.1 本章节学习背景](#1.1 本章节学习背景)
- [1.2 引入 Bootstrap 5](#1.2 引入 Bootstrap 5)
[2. 图片 Image 使用方法](#2. 图片 Image 使用方法)
- [2.1 响应式图片 img-fluid](#2.1 响应式图片 img-fluid)
- [2.2 缩略图 img-thumbnail](#2.2 缩略图 img-thumbnail)
- [2.3 圆角工具类](#2.3 圆角工具类)
- [2.4 百分比宽度控制](#2.4 百分比宽度控制)
- [2.5 图片居中对齐](#2.5 图片居中对齐)
[3. 底层实现关键点解析](#3. 底层实现关键点解析)
- [3.1 响应式图片](#3.1 响应式图片)
- [3.2 缩略图相框](#3.2 缩略图相框)
- [3.3 圆角样式](#3.3 圆角样式)
- [3.4 宽度工具类](#3.4 宽度工具类)
- [3.5 块级居中](#3.5 块级居中)
[4. 小结](#4. 小结)

1. 开篇介绍与环境引入

1.1 本章节学习背景

网页开发当中，图片是非常普遍的元素。原生 img 如果不做任何处理，大图很容易撑破容器，在移动端产生横向滚动条；想要统一圆角、缩略相框、居中对齐，每次手写 CSS 比较麻烦。Bootstrap 提供了一套配套的图片工具类，可以快速实现响应式图片、圆角、缩略图、对齐等效果。

按照本系列固定的学习思路，我们不会仅仅记住类名、复制代码。先学会图片相关类的使用方式，之后通过精简的 CSS 复刻，看懂它背后依靠哪些 CSS 特性实现，反过来巩固我们的 CSS 基础，完善前端技术体系。

图片组件属于纯 CSS 组件，不需要 JavaScript。

1.2 引入 Bootstrap 5

这里着重强调：引入 Bootstrap，本质就是引用别人提前写好的 CSS 类库以及配套的 JS 函数库，不需要把完整源码复制到我们自己的页面当中，通过外链引用的方式加载。想要使用图片工具类，只需要引入 Bootstrap 的 CSS 文件即可。推荐使用 CDN 的方式，不需要下载本地文件。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css">
</head>

<body>
    <!-- Bootstrap JS + Popper，用于部分交互 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/js/bootstrap.bundle.min.js"></script>
</body>

</html>

2. 图片 Image 使用方法

2.1 响应式图片 img-fluid

img-fluid 是最常用的图片类，让图片跟随父容器自动缩放，不会溢出容器。

html 复制代码

<div style="border:1px solid black;">
  <img src="https://picsum.photos/id/1015/1200/800" class="img-fluid" alt="风景图片">
</div>

注意，图片会随容器自动缩放，效果：

2.2 缩略图 img-thumbnail

添加 img-thumbnail，会自动带上内边距、边框与圆角，做成相框样式，适合图片列表。

html 复制代码

<img src="https://picsum.photos/id/1025/200/200" class="img-thumbnail" alt="缩略图">

效果：

2.3 圆角工具类

使用圆角系列类，可以控制图片边角形态，头像场景经常使用 rounded-circle。

html 复制代码

<img src="https://picsum.photos/id/1035/200/200" class="rounded" alt="默认圆角">
<img src="https://picsum.photos/id/1045/200/200" class="rounded-circle" alt="圆形头像">
<img src="https://picsum.photos/id/1055/200/200" class="rounded-0" alt="直角图片">

效果：

2.4 百分比宽度控制

借助宽度工具类，可以直接设置图片占父容器的百分比宽度。

html 复制代码

   	<div style="border:1px solid black;width:300px;height: 300px;">
        <img src="https://picsum.photos/id/1075/600/400" class="w-50" alt="占父容器一半宽度">
    </div>
    <hr>
    <div style="border:1px solid black;width:300px;height: 300px;">
        <img src="https://picsum.photos/id/1075/600/400" class="w-100" alt="撑满父容器">
    </div>

效果：

2.5 图片居中对齐

图片属于行内元素，如果想要块级居中，需要搭配 d-block 和 mx-auto。

html 复制代码

	<div style="border:1px solid black;width:400px;height: 400px;">
        <img src="https://picsum.photos/id/1075/300/200" class="d-block mx-auto" alt="居中图片">
    </div>

效果：

3. 底层实现关键点解析

下面是精简复刻版本，去掉大量浏览器兼容代码，只保留核心逻辑。

3.1 响应式图片

css 复制代码

.img-fluid {
  /* 设置最大宽度，永远不会超过父容器 */
  max-width: 100%;
  /* 高度自动跟随宽度变化，锁定原始宽高比 */
  height: auto;
}

3.2 缩略图相框

css 复制代码

.img-thumbnail {
  /* 图片和边框之间留出留白 */
  padding: 0.25rem;
  /* 留白底色 */
  background-color: #fff;
  /* 相框边框 */
  border: 1px solid #dee2e6;
  /* 统一圆角 */
  border-radius: 0.375rem;
  /* 同时开启响应式缩放 */
  max-width: 100%;
  height: auto;
}

3.3 圆角样式

css 复制代码

/* 默认小圆角 */
.rounded {
  border-radius: 0.375rem;
}
/* 50% 圆角，宽高相等时就是正圆 */
.rounded-circle {
  border-radius: 50%;
}
/* 清除圆角，恢复直角 */
.rounded-0 {
  border-radius: 0;
}

3.4 宽度工具类

css 复制代码

/* 宽度占父容器 50% */
.w-50 {
  width: 50%;
}
/* 宽度占父容器 100% */
.w-100 {
  width: 100%;
}

3.5 块级居中

css 复制代码

/* 将图片转为块级元素 */
.d-block {
  display: block;
}
/* 左右外边距自动，实现块级水平居中 */
.mx-auto {
  margin-right: auto;
  margin-left: auto;
}

4. 小结

图片相关工具类，本质是把网页里最常用的图片样式提前封装好，不用重复手写。

img-fluid 使用 max-width，只会缩小图片，不会强行拉伸放大图片造成模糊；
img-thumbnail 通过 padding、border 模拟相框效果；
rounded-circle 想要呈现标准圆形，要求图片本身宽高保持一致；
w-* 百分比宽度是相对于它的直接父容器进行计算；
mx-auto 只对块级元素生效，行内图片想要居中，必须配合 d-block；
alt 属性建议始终带上，用于图片加载失败提示以及无障碍访问。