Bootstrap4 图像形状

晚夜微雨问海棠呀

324人浏览 · 2026-04-27 20:13:56

晚夜微雨问海棠呀 · 2026-04-27 20:13:56 发布

Bootstrap 4 图像形状详解

一、响应式图片

让图片自动缩放，不超过父容器宽度：

<img src="photo.jpg" class="img-fluid" alt="响应式图片">

底层实现：

.img-fluid {
  max-width: 100%;
  height: auto;
}

关键：max-width 而非 width，图片不会放大，只会缩小。小图不会被拉伸。

二、圆角图片（Rounded）

1. 基本圆角

<img src="photo.jpg" class="rounded" alt="圆角">

效果：四角 0.25rem 圆角（border-radius: 0.25rem）。

2. 方向圆角

<img src="photo.jpg" class="rounded-top" alt="上方圆角">
<img src="photo.jpg" class="rounded-bottom" alt="下方圆角">
<img src="photo.jpg" class="rounded-left" alt="左侧圆角">
<img src="photo.jpg" class="rounded-right" alt="右侧圆角">

3. 圆角尺寸

<img src="photo.jpg" class="rounded-0" alt="无圆角">
<img src="photo.jpg" class="rounded" alt="小圆角 (0.25rem)">
<img src="photo.jpg" class="rounded-lg" alt="大圆角 (0.3rem)">
<img src="photo.jpg" class="rounded-sm" alt="小圆角 (0.2rem)">

4. 圆角类速查

类名	效果	border-radius
`.rounded`	四角圆角	0.25rem
`.rounded-top`	左上+右上	0.25rem 0.25rem 0 0
`.rounded-bottom`	左下+右下	0 0 0.25rem 0.25rem
`.rounded-left`	左上+左下	0.25rem 0 0 0.25rem
`.rounded-right`	右上+右下	0 0.25rem 0.25rem 0
`.rounded-circle`	圆形	50%
`.rounded-pill`	胶囊形	50rem
`.rounded-0`	无圆角	0
`.rounded-sm`	更小圆角	0.2rem
`.rounded-lg`	更大圆角	0.3rem

三、圆形图片（Circle）

将正方形图片裁剪为圆形：

<img src="avatar.jpg" class="rounded-circle" alt="圆形头像">

底层实现：border-radius: 50%

效果示意：

原始正方形：        圆形裁剪：
┌──────────┐         ╭────────╮
│          │         │        │
│   头像   │   →     │  头像  │
│          │         │        │
└──────────┘         ╰────────╯

注意：图片必须是正方形才能呈现完美圆形。矩形图片会变成椭圆。

常见头像尺寸：

<!-- 40×40 小头像 -->
<img src="avatar.jpg" class="rounded-circle" width="40" height="40" alt="头像">

<!-- 80×80 中头像 -->
<img src="avatar.jpg" class="rounded-circle" width="80" height="80" alt="头像">

<!-- 配合固定尺寸 -->
<img src="avatar.jpg" class="rounded-circle" 
     style="width: 64px; height: 64px; object-fit: cover;" alt="头像">

object-fit: cover 确保图片填满区域不变形。

四、胶囊形图片（Pill）

<img src="badge.jpg" class="rounded-pill" alt="胶囊形">

底层实现：border-radius: 50rem

效果：极圆的圆角，形成胶囊/药丸形状。适用于横向矩形图片。

原始矩形：          胶囊形：
┌────────────────┐   ╭────────────────╮
│    徽章图片     │ → │    徽章图片     │
└────────────────┘   ╰────────────────╯

五、缩略图（Thumbnail）

带边框和圆角的图片框：

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

效果：

1px 浅灰边框（#dee2e6）
0.25rem 圆角
4px 内边距（白色背景露出形成边框效果）

┌─────────────────────┐
│  ┌───────────────┐  │
│  │               │  │
│  │    图片内容    │  │
│  │               │  │
│  └───────────────┘  │
└─────────────────────┘
  ↑ 白色 padding + 边框

六、图片对齐

1. Float 浮动对齐

<!-- 左浮动 -->
<img src="photo.jpg" class="float-left" alt="左对齐">
<p>文字环绕在图片右侧...</p>

<!-- 右浮动 -->
<img src="photo.jpg" class="float-right" alt="右对齐">
<p>文字环绕在图片左侧...</p>

2. Margin 工具类居中

<!-- 水平居中（块级元素） -->
<img src="photo.jpg" class="mx-auto d-block" alt="居中">

必须同时加 .d-block，因为 <img> 默认是行内元素，mx-auto 对行内元素无效。

3. Flex 居中

<div class="d-flex justify-content-center">
  <img src="photo.jpg" alt="居中">
</div>

<div class="text-center">
  <img src="photo.jpg" alt="居中">
</div>

4. 对齐方式速查

方式	类名	说明
左浮动	`.float-left`	文字环绕右侧
右浮动	`.float-right`	文字环绕左侧
块级居中	`.mx-auto .d-block`	图片独占一行居中
文本居中	父级 `.text-center`	行内图片居中
Flex 居中	父级 `.d-flex .justify-content-center`	灵活居中

七、Picture 元素

为不同屏幕尺寸提供不同图片源：

<picture>
  <source srcset="photo-wide.jpg" media="(min-width: 992px)">
  <source srcset="photo-medium.jpg" media="(min-width: 576px)">
  <img src="photo-small.jpg" class="img-fluid" alt="响应式图片">
</picture>

注意：.img-fluid 加在 <img> 上，不是 <picture> 或 <source> 上。

八、形状组合使用

1. 响应式 + 圆角

<img src="photo.jpg" class="img-fluid rounded" alt="响应式圆角">

2. 响应式 + 圆形

<img src="avatar.jpg" class="img-fluid rounded-circle" alt="响应式圆形">

3. 缩略图 + 圆形

<img src="avatar.jpg" class="img-thumbnail rounded-circle" alt="圆形缩略图">

效果：圆形裁剪 + 白色边框 + 圆角。

4. 组合速查

组合	效果	场景
`.img-fluid .rounded`	响应式圆角	通用内容图片
`.img-fluid .rounded-circle`	响应式圆形	用户头像
`.img-thumbnail`	缩略图边框	图片画廊
`.img-thumbnail .rounded-circle`	圆形缩略图	头像列表
`.img-fluid .rounded-lg`	响应式大圆角	卡片封面
`.img-fluid .rounded-0`	响应式直角	棱角风格设计

九、实战示例

1. 用户头像卡片

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <img src="avatar.jpg" class="rounded-circle mb-3"
         style="width: 80px; height: 80px; object-fit: cover;" alt="头像">
    <h5 class="card-title">张三</h5>
    <p class="card-text text-muted">前端工程师</p>
  </div>
</div>

2. 图片画廊

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-6 mb-4">
      <img src="img1.jpg" class="img-fluid img-thumbnail" alt="图片1">
    </div>
    <div class="col-lg-3 col-md-4 col-6 mb-4">
      <img src="img2.jpg" class="img-fluid img-thumbnail" alt="图片2">
    </div>
    <div class="col-lg-3 col-md-4 col-6 mb-4">
      <img src="img3.jpg" class="img-fluid img-thumbnail" alt="图片3">
    </div>
    <div class="col-lg-3 col-md-4 col-6 mb-4">
      <img src="img4.jpg" class="img-fluid img-thumbnail" alt="图片4">
    </div>
  </div>
</div>

3. 文章图文混排

<article class="container">
  <h2>文章标题</h2>
  <p>文章开头段落...</p>
  
  <img src="article.jpg" class="float-left rounded mr-3 mb-2"
       style="max-width: 300px;" alt="文章配图">
  
  <p>文字内容会环绕在图片右侧，形成图文混排效果。
     当文字足够多时，会自然流到图片下方继续显示。</p>
  <p>更多段落内容...</p>
  
  <!-- 清除浮动 -->
  <div class="clearfix"></div>
  
  <p>浮动后的新段落。</p>
</article>

4. 团队成员列表

<div class="row text-center">
  <div class="col-md-4 mb-4">
    <img src="member1.jpg" class="rounded-circle mb-3"
         style="width: 120px; height: 120px; object-fit: cover;" alt="成员1">
    <h5>李明</h5>
    <p class="text-muted mb-2">产品经理</p>
    <a href="#" class="text-primary mr-2">微博</a>
    <a href="#" class="text-muted">GitHub</a>
  </div>
  <div class="col-md-4 mb-4">
    <img src="member2.jpg" class="rounded-circle mb-3"
         style="width: 120px; height: 120px; object-fit: cover;" alt="成员2">
    <h5>王芳</h5>
    <p class="text-muted mb-2">UI 设计师</p>
    <a href="#" class="text-primary mr-2">微博</a>
    <a href="#" class="text-muted">GitHub</a>
  </div>
  <div class="col-md-4 mb-4">
    <img src="member3.jpg" class="rounded-circle mb-3"
         style="width: 120px; height: 120px; object-fit: cover;" alt="成员3">
    <h5>赵强</h5>
    <p class="text-muted mb-2">后端开发</p>
    <a href="#" class="text-primary mr-2">微博</a>
    <a href="#" class="text-muted">GitHub</a>
  </div>
</div>

5. Hero 背景图 + 圆角卡片

<div class="position-relative overflow-hidden rounded-lg"
     style="height: 400px;">
  <img src="hero.jpg" class="img-fluid w-100" 
       style="height: 100%; object-fit: cover;" alt="背景">
  <div class="position-absolute rounded-lg"
       style="top:0; left:0; right:0; bottom:0; 
              background: rgba(0,0,0,0.4);">
    <div class="d-flex h-100 align-items-center justify-content-center">
      <div class="text-center text-white">
        <h1 class="display-4">欢迎访问</h1>
        <p class="lead">探索更多精彩内容</p>
      </div>
    </div>
  </div>
</div>

十、类名速查总表

类名	效果	CSS
`.img-fluid`	响应式缩放	`max-width:100%; height:auto`
`.img-thumbnail`	缩略图边框	`padding:0.25rem; border:1px solid #dee2e6; border-radius:0.25rem`
`.rounded`	四角圆角	`border-radius:0.25rem`
`.rounded-top`	上方圆角	`border-radius:0.25rem 0.25rem 0 0`
`.rounded-right`	右侧圆角	`border-radius:0 0.25rem 0.25rem 0`
`.rounded-bottom`	下方圆角	`border-radius:0 0 0.25rem 0.25rem`
`.rounded-left`	左侧圆角	`border-radius:0.25rem 0 0 0.25rem`
`.rounded-circle`	圆形	`border-radius:50%`
`.rounded-pill`	胶囊形	`border-radius:50rem`
`.rounded-0`	无圆角	`border-radius:0`
`.rounded-sm`	小圆角	`border-radius:0.2rem`
`.rounded-lg`	大圆角	`border-radius:0.3rem`
`.float-left`	左浮动	`float:left`
`.float-right`	右浮动	`float:right`
`.mx-auto .d-block`	块级居中	`margin:0 auto; display:block`

十一、注意事项

要点	说明
圆形需正方形	`.rounded-circle` 对矩形图片产生椭圆，需确保宽高相等或用 `object-fit:cover`
`img-fluid` 不放大	使用 `max-width` 而非 `width`，小图不会被拉伸模糊
`mx-auto` 需 `d-block`	行内元素 `margin:auto` 无效，必须转为块级
浮动需清除	`.float-left/right` 后需 `.clearfix` 清除，否则布局错乱
`img-thumbnail` 有 padding	缩略图白色内边距会改变视觉尺寸，布局时需考虑
`object-fit` 兼容性	`object-fit:cover` 不支持 IE，现代浏览器均支持
alt 属性	始终为图片添加 `alt` 属性，提升无障碍和 SEO
圆角类通用	`.rounded-*` 不仅用于图片，可用于任何元素（div、按钮等）

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

大模型入门-GSPO 分组序列策略优化

AtomGit开源社区

（毕业必看）实测靠谱的AI论文软件，毕业党收藏备用

你是不是也在为毕业论文发愁？选题纠结、资料找不全、写到一半卡壳、查重反复修改、格式总调不对…… 这份精心整理的AI论文工具合集，涵盖中英文写作、全流程辅助、专项功能、免费与高性价比

AtomGit开源社区

绝地求生：如何在 2026 年把 OpenAI Codex 强行交叉编译到 RISC-V 架构

OpenAI 官方开源的 Codex CLI 是当前极为强大的本地代码 Agent，但官方却唯独没有提供 RISC-V 架构的预编译版本。为了在我们的 Starfive 星光板上跑起这个大杀器，昨晚我们曾试图在 QEMU 模拟器中偷懒编译，结果被 V8 引擎庞大的源码量和指令翻译开销拖到内存爆炸、进程卡死。痛定思痛后，我们决定采用最硬核的方式——。在这场战役中，我们历经重重险阻，连续趟平了 10