Bootstrap 5 图像与形状系统
Bootstrap 5 提供了一套完整的图像处理和形状样式工具，帮助您快速创建响应式、美观的视觉元素。
主要功能包括：
- 响应式图像 - 自动适应不同屏幕尺寸
- 图像形状 - 圆形、圆角、缩略图等样式
- 图像对齐 - 在文本内容中精确对齐图像
- 缩略图 - 创建图像画廊和预览
- 宽高比 - 保持图像和媒体的比例
图像样式示例
圆形
圆形图像
圆角
圆角图像
缩略图
缩略图
响应式图像
基本响应式图像
使用 .img-fluid 类创建响应式图像，自动适应父容器宽度。
响应式图像示例
调整浏览器窗口大小查看效果
<!-- 响应式图像 -->
<img src="image.jpg" class="img-fluid" alt="响应式图像">
<!-- 使用占位符示例 -->
<div class="image-placeholder img-fluid" style="height: 200px;">
响应式图像示例
</div>响应式图像的重要性
- 确保图像在不同设备上正常显示
- 提高页面加载性能
- 改善用户体验
- 符合现代Web设计标准
图像形状
圆角图像
使用 .rounded 类为图像添加圆角。
圆角图像
.rounded
圆形图像
使用 .rounded-circle 类创建圆形图像。
圆形图像
.rounded-circle
缩略图
使用 .img-thumbnail 类创建带边框的缩略图。
缩略图
.img-thumbnail
<!-- 圆角图像 -->
<img src="image.jpg" class="rounded" alt="圆角图像">
<!-- 圆形图像 -->
<img src="image.jpg" class="rounded-circle" alt="圆形图像">
<!-- 缩略图 -->
<img src="image.jpg" class="img-thumbnail" alt="缩略图">
<!-- 组合使用 -->
<img src="image.jpg" class="img-fluid rounded" alt="响应式圆角图像">圆角大小变体
Bootstrap 5 提供了不同大小的圆角类。
无圆角
.rounded-0
小圆角
.rounded-1
默认圆角
.rounded-2
大圆角
.rounded-3
更大圆角
.rounded-4
最大圆角
.rounded-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="最大圆角">图像对齐
浮动对齐
使用浮动类将图像对齐到文本内容的左侧或右侧。
左浮动
这是一段示例文本，演示图像左浮动对齐的效果。图像会浮动在文本的左侧，文本内容会围绕图像排列。这种方法常用于文章中的插图或产品介绍中的图片展示。
右浮动
这是一段示例文本，演示图像右浮动对齐的效果。图像会浮动在文本的右侧，文本内容会围绕图像排列。这种方法也常用于文章中的插图或产品介绍中的图片展示。
<!-- 左浮动图像 -->
<img src="image.jpg" class="rounded float-start" alt="左浮动图像">
<p>文本内容...</p>
<!-- 右浮动图像 -->
<img src="image.jpg" class="rounded float-end" alt="右浮动图像">
<p>文本内容...</p>
<!-- 清除浮动 -->
<div class="clearfix"></div>居中对齐
使用 .mx-auto 和 .d-block 类将图像居中对齐。
居中对齐
图像在容器中居中对齐
<!-- 居中对齐图像 -->
<img src="image.jpg" class="rounded mx-auto d-block" alt="居中对齐图像">图像画廊
使用Bootstrap网格系统和图像类创建响应式图像画廊。
图像 1
带边框的缩略图
图像 2
圆角图像
图像 3
圆形图像
<div class="row">
<div class="col-md-4">
<img src="image1.jpg" class="img-thumbnail" alt="图像1">
<p class="text-center">带边框的缩略图</p>
</div>
<div class="col-md-4">
<img src="image2.jpg" class="rounded" alt="图像2">
<p class="text-center">圆角图像</p>
</div>
<div class="col-md-4">
<img src="image3.jpg" class="rounded-circle" alt="图像3">
<p class="text-center">圆形图像</p>
</div>
</div>宽高比
使用 .ratio 类保持嵌入内容（如图像、视频、iframe）的宽高比。
1x1 宽高比
1:1
4x3 宽高比
4:3
16x9 宽高比
16:9
<!-- 1x1 宽高比 -->
<div class="ratio ratio-1x1">
<img src="image.jpg" alt="1:1 图像">
</div>
<!-- 4x3 宽高比 -->
<div class="ratio ratio-4x3">
<img src="image.jpg" alt="4:3 图像">
</div>
<!-- 16x9 宽高比 -->
<div class="ratio ratio-16x9">
<img src="image.jpg" alt="16:9 图像">
</div>
<!-- 21x9 宽高比 -->
<div class="ratio ratio-21x9">
<img src="image.jpg" alt="21:9 图像">
</div>自定义宽高比
您可以使用CSS自定义属性创建自定义宽高比。
自定义 30%
<!-- 自定义宽高比 -->
<div class="ratio" style="--bs-aspect-ratio: 30%;">
<img src="image.jpg" alt="自定义宽高比图像">
</div>图像与文本组合
将图像与文本内容结合，创建美观的布局。
产品图像
产品名称
这是一段关于产品的详细描述。图像与文本的结合可以创建视觉上吸引人的布局，提高内容的可读性和吸引力。
最后更新 3 分钟前
服务介绍
这是一段关于服务的详细描述。通过将图像与文本结合，可以创建更加生动和具有说服力的内容展示。
最后更新 5 分钟前
服务图像
<div class="card">
<div class="row g-0">
<div class="col-md-4">
<img src="product.jpg" class="img-fluid rounded-start" alt="产品图像">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">产品名称</h5>
<p class="card-text">产品描述...</p>
</div>
</div>
</div>
</div>图像覆盖效果
使用Bootstrap工具类创建图像覆盖效果。
背景图像
图像标题
这是覆盖在图像上的文本内容
<div class="position-relative">
<img src="background.jpg" class="img-fluid" alt="背景图像">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
<div class="text-white text-center p-3" style="background-color: rgba(0,0,0,0.5);">
<h3>图像标题</h3>
<p>这是覆盖在图像上的文本内容</p>
<button class="btn btn-primary">了解更多</button>
</div>
</div>
</div>卡片图像覆盖
卡片背景
图像使用最佳实践
性能优化
- 使用适当尺寸的图像，避免过大文件
- 使用现代图像格式（WebP、AVIF）
- 实现懒加载以提高页面加载速度
- 为图像添加适当的alt文本
响应式设计
- 始终使用响应式图像类
- 考虑在不同断点使用不同图像
- 测试图像在各种设备上的显示效果
- 使用宽高比类保持图像比例
可访问性
- 为所有图像提供有意义的alt文本
- 确保图像与背景有足够对比度
- 避免仅使用图像传达重要信息
- 为复杂图像提供详细描述
视觉设计
- 保持图像风格的一致性
- 使用适当的图像形状增强视觉效果
- 考虑图像与周围内容的和谐
- 使用阴影和边框创建深度感