Bootstrap 图片样式类

问题

Bootstrap 有哪些关于 img 的 class？

解答

Bootstrap 4/5 图片类

<!-- 响应式图片：自动适应父容器宽度 -->
<img src="image.jpg" class="img-fluid" alt="响应式图片">

<!-- 缩略图：带边框和圆角的图片 -->
<img src="image.jpg" class="img-thumbnail" alt="缩略图">

<!-- 圆角图片 -->
<img src="image.jpg" class="tckc3" alt="圆角图片">

<!-- 圆形图片 -->
<img src="image.jpg" class="rounded-circle" alt="圆形图片">

<!-- 无圆角 -->
<img src="image.jpg" class="rounded-0" alt="无圆角">

圆角方向控制

<!-- 顶部圆角 -->
<img src="image.jpg" class="rounded-top" alt="">

<!-- 底部圆角 -->
<img src="image.jpg" class="rounded-bottom" alt="">

<!-- 左侧圆角 (Bootstrap 5 用 start) -->
<img src="image.jpg" class="rounded-start" alt="">

<!-- 右侧圆角 (Bootstrap 5 用 end) -->
<img src="image.jpg" class="rounded-end" alt="">

圆角大小 (Bootstrap 5)

<!-- 圆角大小：0-5 -->
<img src="image.jpg" class="rounded-0" alt="无圆角">
<img src="image.jpg" class="rounded-1" alt="小圆角">
<img src="image.jpg" class="rounded-2" alt="默认圆角">
<img src="image.jpg" class="rounded-3" alt="中圆角">
<img src="image.jpg" class="rounded-4" alt="大圆角">
<img src="image.jpg" class="rounded-5" alt="超大圆角">

Bootstrap 3 图片类（旧版）

<!-- 响应式图片 -->
<img src="image.jpg" class="img-responsive" alt="">

<!-- 圆角图片 -->
<img src="image.jpg" class="img-rounded" alt="">

<!-- 圆形图片 -->
<img src="image.jpg" class="img-circle" alt="">

<!-- 缩略图 -->
<img src="image.jpg" class="img-thumbnail" alt="">

版本对照

功能	Bootstrap 3	Bootstrap 4/5
响应式	img-responsive	img-fluid
圆角	img-rounded	rounded
圆形	img-circle	rounded-circle
缩略图	img-thumbnail	img-thumbnail

关键点

• img-fluid 设置 max-width: 100% 和 height: auto，实现响应式
• img-thumbnail 添加 1px 边框、圆角和内边距
• rounded-circle 需要图片是正方形才能显示为正圆
• Bootstrap 5 使用 start/end 替代 left/right 以支持 RTL 布局
• 圆角类可以组合使用，如 rounded-top rounded-3