Bootstrap 图片

图片能让页面更直观，但处理不当会造成拉伸、变形或加载卡顿。Bootstrap 为 <img> 提供了响应式、缩略图、圆角、对齐等一组类，让图片在各种屏幕下都保持美观。

响应式图片 img-fluid

.img-fluid 是图片最常用的类：它让图片宽度最大为父容器的 100% 且高度自适应，容器变窄时图片等比缩小，永远不会溢出：

<!-- 本示例基于 CDN 引入的 Bootstrap 5（引入代码见"环境安装"章节）；响应式图片：随容器宽度缩放 -->
<div class="container">
  <img src="https://example.com/images/landscape.jpg" class="img-fluid" alt="风景图">
</div>

显示效果：把窗口从宽拖到窄，图片始终填满可用宽度并按比例缩放，页面不出现横向滚动条。

缩略图与圆角

.img-thumbnail 给图片加一圈浅灰边框和圆角，像「相框」一样适合展示列表；.rounded-circle 把图片裁成圆形，适合做头像：

<!-- 缩略图与圆形头像 -->
<img src="https://example.com/images/photo.jpg" class="img-thumbnail" width="120" alt="缩略图">
<img src="https://example.com/images/avatar.jpg" class="rounded-circle" width="120" height="120" alt="圆形头像">

显示效果：第一张图被浅灰边框包裹并带圆角；第二张图被裁剪成正圆形，常见于用户头像场景。

图片对齐

图片本质是行内元素，可用浮动类控制位置。float-start 让图片靠左、float-end 让图片靠右，文字可环绕其侧：

<!-- 浮动图片与环绕文字 -->
<div class="clearfix">
  <img src="https://example.com/images/pic.jpg" class="float-end w-25" alt="示例图">
  <p>这段文字会环绕在图片左侧，形成图文混排效果，适合文章配图场景。</p>
</div>

显示效果：图片靠右浮动，段落文字占据图片左侧空间形成环绕排版；.clearfix 保证外层容器高度不被浮动破坏。

居中显示图片

把图片变成块级元素并让左右外边距为 auto 即可居中，写法是 d-block mx-auto；也可以把图片放进 text-center 的父容器：

<!-- 图片水平居中 -->
<img src="https://example.com/images/logo.png" class="d-block mx-auto w-25" alt="居中 Logo">

显示效果：图片在其父容器内水平居中，两侧留白相等，适合页头 Logo 与首屏主图。

小结

把 img-fluid 当作默认选择保证自适应；需要边框用 img-thumbnail，头像用 rounded-circle；再配合 float 浮动与 mx-auto 居中处理对齐，图片展示问题基本解决。