Bootstrap 图像形状
概述
Bootstrap 提供了多种图像样式类，用于控制图像的显示效果，包括响应式图像、图像形状、图像对齐等功能。
响应式图像
使用 .img-responsive 或 .img-fluid 类让图像适应父元素的宽度：
html
<img src="..." class="img-fluid" alt="响应式图像">响应式图像会自动缩放以适应父元素的宽度，最大宽度为 100%，高度自动调整以保持宽高比。
图像形状
圆角图像
使用 .rounded 类为图像添加圆角：
html
<img src="..." class="rounded" alt="圆角图像">圆形图像
使用 .rounded-circle 类创建圆形图像：
html
<img src="..." class="rounded-circle" alt="圆形图像">缩略图样式
使用 .img-thumbnail 类创建带边框的缩略图：
html
<img src="..." class="img-thumbnail" alt="缩略图">图像对齐
浮动对齐
html
<!-- 左浮动 -->
<img src="..." class="float-start" alt="左浮动图像">
<!-- 右浮动 -->
<img src="..." class="float-end" alt="右浮动图像">居中对齐
html
<!-- 使用 mx-auto 和 d-block -->
<img src="..." class="mx-auto d-block" alt="居中图像">
<!-- 或者使用 text-center 包装 -->
<div class="text-center">
<img src="..." alt="居中图像">
</div>图像尺寸
虽然 Bootstrap 没有提供专门的图像尺寸类，但你可以使用宽度工具类：
html
<img src="..." class="w-25" alt="25% 宽度">
<img src="..." class="w-50" alt="50% 宽度">
<img src="..." class="w-75" alt="75% 宽度">
<img src="..." class="w-100" alt="100% 宽度">实际示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 图像示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.demo-img {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #007bff, #6f42c1);
display: inline-block;
margin: 10px;
}
.placeholder-img {
background-color: #e9ecef;
color: #6c757d;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container my-5">
<h1>Bootstrap 图像形状示例</h1>
<!-- 响应式图像 -->
<h2>响应式图像</h2>
<p>调整浏览器窗口大小查看效果：</p>
<div class="row">
<div class="col-md-6">
<div class="demo-img placeholder-img img-fluid">
响应式图像
</div>
</div>
</div>
<!-- 图像形状 -->
<h2 class="mt-5">图像形状</h2>
<div class="row">
<div class="col-md-4 text-center">
<h5>默认</h5>
<div class="demo-img placeholder-img">
默认图像
</div>
</div>
<div class="col-md-4 text-center">
<h5>圆角 (.rounded)</h5>
<div class="demo-img placeholder-img rounded">
圆角图像
</div>
</div>
<div class="col-md-4 text-center">
<h5>圆形 (.rounded-circle)</h5>
<div class="demo-img placeholder-img rounded-circle">
圆形图像
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-4 text-center">
<h5>缩略图 (.img-thumbnail)</h5>
<div class="demo-img placeholder-img img-thumbnail">
缩略图
</div>
</div>
</div>
<!-- 图像对齐 -->
<h2 class="mt-5">图像对齐</h2>
<h4>浮动对齐</h4>
<div class="clearfix">
<div class="demo-img placeholder-img float-start me-3" style="width: 150px; height: 150px;">
左浮动
</div>
<p>这是一段文本，展示左浮动图像的效果。图像会浮动到左侧，文本会环绕在图像周围。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="clearfix mt-4">
<div class="demo-img placeholder-img float-end ms-3" style="width: 150px; height: 150px;">
右浮动
</div>
<p>这是一段文本，展示右浮动图像的效果。图像会浮动到右侧，文本会环绕在图像周围。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h4 class="mt-5">居中对齐</h4>
<div class="demo-img placeholder-img mx-auto d-block" style="width: 200px; height: 150px;">
居中图像
</div>
<!-- 图像尺寸 -->
<h2 class="mt-5">图像尺寸</h2>
<div class="row">
<div class="col-12">
<div class="demo-img placeholder-img w-25 d-inline-block" style="height: 100px;">
25% 宽度
</div>
<div class="demo-img placeholder-img w-50 d-inline-block" style="height: 100px;">
50% 宽度
</div>
<div class="demo-img placeholder-img w-75 d-inline-block" style="height: 100px;">
75% 宽度
</div>
<div class="demo-img placeholder-img w-100" style="height: 100px;">
100% 宽度
</div>
</div>
</div>
<!-- 实际图像示例 -->
<h2 class="mt-5">实际应用示例</h2>
<!-- 用户头像 -->
<h4>用户头像</h4>
<div class="d-flex align-items-center mb-3">
<div class="demo-img placeholder-img rounded-circle me-3" style="width: 60px; height: 60px; font-size: 12px;">
头像
</div>
<div>
<h6 class="mb-0">张三</h6>
<small class="text-muted">前端开发工程师</small>
</div>
</div>
<!-- 产品展示 -->
<h4>产品展示</h4>
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<div class="demo-img placeholder-img card-img-top" style="height: 200px;">
产品图片
</div>
<div class="card-body">
<h5 class="card-title">产品名称</h5>
<p class="card-text">产品描述信息。</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="demo-img placeholder-img card-img-top rounded-top" style="height: 200px;">
产品图片
</div>
<div class="card-body">
<h5 class="card-title">产品名称</h5>
<p class="card-text">产品描述信息。</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
</div>
<!-- 图片画廊 -->
<h4>图片画廊</h4>
<div class="row">
<div class="col-md-3 mb-3">
<div class="demo-img placeholder-img img-thumbnail w-100" style="height: 150px;">
图片 1
</div>
</div>
<div class="col-md-3 mb-3">
<div class="demo-img placeholder-img img-thumbnail w-100" style="height: 150px;">
图片 2
</div>
</div>
<div class="col-md-3 mb-3">
<div class="demo-img placeholder-img img-thumbnail w-100" style="height: 150px;">
图片 3
</div>
</div>
<div class="col-md-3 mb-3">
<div class="demo-img placeholder-img img-thumbnail w-100" style="height: 150px;">
图片 4
</div>
</div>
</div>
</div>
</body>
</html>图像优化技巧
1. 使用适当的图像格式
html
<!-- 对于照片使用 JPEG -->
<img src="photo.jpg" class="img-fluid" alt="照片">
<!-- 对于图标和简单图形使用 PNG 或 SVG -->
<img src="icon.svg" class="img-fluid" alt="图标">
<!-- 对于现代浏览器使用 WebP -->
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" class="img-fluid" alt="图像">
</picture>2. 响应式图像
html
<!-- 使用 srcset 提供不同尺寸的图像 -->
<img src="small.jpg"
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
sizes="(max-width: 576px) 300px, (max-width: 768px) 600px, 1200px"
class="img-fluid"
alt="响应式图像">3. 懒加载
html
<!-- 使用 loading="lazy" 实现懒加载 -->
<img src="image.jpg" class="img-fluid" loading="lazy" alt="懒加载图像">图像与文本组合
媒体对象
html
<div class="d-flex">
<div class="flex-shrink-0">
<div class="demo-img placeholder-img rounded" style="width: 64px; height: 64px; font-size: 12px;">
图像
</div>
</div>
<div class="flex-grow-1 ms-3">
<h5 class="mt-0">媒体标题</h5>
这是媒体对象的内容。图像在左侧，内容在右侧。
</div>
</div>图文混排
html
<div class="row align-items-center">
<div class="col-md-6">
<div class="demo-img placeholder-img w-100" style="height: 300px;">
特色图像
</div>
</div>
<div class="col-md-6">
<h3>特色内容</h3>
<p>这里是与图像相关的文本内容。可以是产品介绍、功能说明或其他相关信息。</p>
<a href="#" class="btn btn-primary">了解更多</a>
</div>
</div>最佳实践
- 始终添加 alt 属性：为所有图像提供有意义的替代文本
- 使用响应式图像：确保图像在所有设备上都能正确显示
- 优化图像大小：压缩图像以提高加载速度
- 选择合适的形状：根据设计需求选择合适的图像形状
- 考虑可访问性：确保图像不会影响内容的可访问性
下一步
现在你已经掌握了 Bootstrap 图像和形状的使用方法，接下来我们将学习 Jumbotron 组件。