Bootstrap 图片样式类
Bootstrap 中常用的图片 class 及使用方法
问题
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
目录