应直接使用 bootstrap 5 的 .img-thumbnail 类，它提供 1px 边框、4px 圆角与内边距、box-sizing: border-box 及响应式支持，避免手动设 border 导致的 retina 发虚或溢出问题。
直接用 .img-thumbnail 就行，别自己写 border
Bootstrap 官方提供的 .img-thumbnail 类就是专为带边框的缩略图设计的——它不是“可选方案”，而是最稳妥的默认解。手动加 border: 1px solid #ddd 看似简单，但容易在 Retina 屏上发虚（因为没设 box-sizing: border-box），也容易因父容器宽度约束不当导致图片溢出。
这个类自带：1px solid #dee2e6（Bootstrap 5 默认灰边）、4px border-radius、4px padding，且强制 box-sizing: border-box 和响应式行为（max-width: 100% + height: auto）。
- 不用额外 CSS，不依赖父容器 class 或 width 设置
- IE11+ 和所有现代浏览器都支持，无兼容性风险
- 如果项目已升级到 Bootstrap 5，
.img-rounded和.img-circle已被移除，.img-thumbnail是唯一保留的“带边框图片”语义类
.img-thumbnail 和 .thumbnail 容器是两回事
很多人混淆 .img-thumbnail（作用于 <img> 标签本身）和旧版 Bootstrap 3 的 .thumbnail（一个带背景、内边距、hover 效果的 <div> 容器）。后者在 Bootstrap 5 中已被彻底移除，不再维护。
<p>如果你需要图片+标题+按钮的完整卡片结构，应该用 Bootstrap 5 的 <code>.card 组件替代，而不是硬套已废弃的 .thumbnail 类：
<div class="card" style="width: 18rem;">
@@##@@
<div class="card-body">
<h5 class="card-title">标题</h5>
<p class="card-text">描述</p>
<a href="#" class="btn btn-primary">按钮</a>
</div>
</div>
-
.img-thumbnail只负责单张图的样式，不提供布局、hover、caption 等功能 - 强行复用 Bootstrap 3 的
.thumbnailCSS 到 BS5 项目中，会导致 margin/padding 冲突、过渡动画失效、hover 边框色错乱等问题 - 若必须兼容老代码，需单独提取并重命名其 CSS 规则，不能直接混用 class 名
想改边框颜色或圆角？优先覆盖 CSS 变量
Bootstrap 5 支持通过 CSS 自定义属性（CSS variables）调整 .img-thumbnail 的外观，比写 !important 覆盖更干净、更易维护：
:root {
--bs-thumbnail-border-color: #0d6efd;
--bs-thumbnail-border-radius: 8px;
--bs-thumbnail-padding: 6px;
}
- 修改
--bs-thumbnail-border-color即可换边框色，无需重写整个 border 声明 - 圆角和内边距也由对应变量控制，改一处，全局生效
- 注意：这些变量只在 Bootstrap 5.3.0+ 版本中默认启用；低于此版本需手动引入或升级
- 如果用 Sass 编译，直接在
$thumbnail-border-color等变量处赋值更彻底
响应式图片组合布局时，别漏掉 .img-fluid
当多张 .img-thumbnail 图片并排显示（比如网格布局中），仅靠 .img-thumbnail 不足以保证在小屏下自动缩放。它虽有 max-width: 100%，但缺少 height: auto 的显式继承保障 —— 某些 CMS 或富文本插入的图片可能带内联 height/width，会破坏比例。
稳妥做法是叠加 .img-fluid：
@@##@@
-
.img-fluid强制height: auto，确保宽高比不塌陷 - 两者组合后，图片既带标准缩略图边框，又能在任何容器宽度下保持清晰、等比缩放
- 单独用
.img-fluid没边框，单独用.img-thumbnail在某些上下文中可能因 inline-style 干扰而失比例 —— 必须一起用才完整
.img-thumbnail 的边框颜色和圆角值，在不同 Bootstrap 主版本间有细微差异（比如 BS4 是 #ddd，BS5 是 #dee2e6），升级时如果不检查视觉回归，上线后边框会突然变浅或变圆，用户第一眼就觉得“不对劲”——这种细节比功能 bug 更难定位。**
