.img-thumbnail 是 Bootstrap 提供的带 1px 灰色边框、4px 圆角、4px 内边距且响应式的图片基础样式，内置 box-sizing: border-box，避免溢出与 Retina 屏发虚问题。
用 .img-thumbnail 实现带边框的图片基础样式
bootstrap 提供的 .img-thumbnail 是最直接、语义最清晰的方案——它自带 1px 灰色边框、4px 圆角、4px 内边距，且默认响应式（max-width: 100%、height: auto）。不需要额外写 css，也不依赖父容器宽度约束。
常见错误现象：有人手动加 border: 1px solid #ddd，结果在 Retina 屏上边框发虚，或没设 box-sizing: border-box 导致图片溢出父容器。
-
.img-thumbnail内部已声明box-sizing: border-box，安全可靠 - 它不强制固定宽高，适合内容流式布局；若需统一尺寸，得配合
width/height或工具类（如w-100） - Bootstrap 4+ 中
.img-rounded和.img-circle已废弃，别再混用
三图并列 + 均等边框效果：用栅格 + 工具类组合控制
要让三张图横向并排、大小一致、hover 有反馈，不能只靠图片类，得靠 Bootstrap 栅格系统和响应式工具类协同。
使用场景：产品展示页、团队头像墙、服务图标区——要求 PC 端三列、移动端堆叠、图片视觉整齐。
- 用
col-md-4划分三等分（中屏及以上），每列内包裹<img class="img-thumbnail w-100">，确保图片填满列宽 - hover 边框增强建议用
:hover+border覆盖原边框，而不是改背景色（否则会撑开布局） - 避免写
width: 200px; height: 200px—— 这会破坏响应式，且不同比例图片会被拉伸变形
示例关键片段：
<div class="row"> <div class="col-md-4">@@##@@</div> <div class="col-md-4">@@##@@</div> <div class="col-md-4">@@##@@</div> </div>
图片圆角/圆形边框？别用旧类，用 .rounded 和 .rounded-circle
如果你想要的不是“灰色缩略图边框”，而是更现代的圆角或正圆效果，.img-thumbnail 就不合适了——它圆角只有 4px，且边框颜色固定。
参数差异明显：.rounded 是通用圆角（默认 0.25rem ≈ 4px），.rounded-circle 是 50% 圆角，但**仅当图片宽高相等时才显示为正圆**；若原图是长方形，结果就是椭圆。
- 要确保正圆，请先用 CSS 控制容器或图片本身宽高一致（例如
width: 150px; height: 150px; object-fit: cover;） -
.rounded-pill可实现胶囊形圆角（超大圆角），适合徽章类小图 - 所有
.rounded*类都兼容.img-fluid，可叠加使用，比如class="img-fluid rounded-circle"
容易被忽略的细节：响应式失效与图片拉伸失真
很多人加了 .img-thumbnail 还发现图片在小屏上变模糊、错位或留白异常——问题往往不出在图片类本身，而在父级结构或图片源质量。
-
.img-thumbnail默认不设max-height，若原始图片极高，缩放后仍可能撑开卡片高度；建议外层加overflow: hidden或用object-fit: cover配合固定容器尺寸 - 不要依赖
.img-responsive（Bootstrap 4+ 已移除），该类在 v3 中存在，但 v4/v5 全部由.img-fluid替代，混用会导致样式冲突 - 如果图片来自 CMS 或用户上传，务必确认其分辨率足够（至少 2x 视网膜屏所需），否则
width: 100%放大后必然模糊
边框看起来只是视觉装饰，但一旦涉及响应式布局、hover 动效、图片裁剪逻辑，每个选择都会牵扯到盒模型、渲染性能和跨设备一致性。最稳妥的做法，是把边框交给 .img-thumbnail，把尺寸控制交给栅格和 w-100，把形状交给 .rounded* 系列——别自己重写 border-radius 或 padding。
