本文共 860 字，大约阅读时间需要 2 分钟。

Bootstrap 图片处理指南

在 Bootstrap 开发中，图片处理是非常常见的需求。以下是关于 Bootstrap 图片功能的详细说明和实用技巧。

1. 响应式图片处理

Bootstrap 提供了强大的响应式图片功能，主要通过为图片添加类名 .img-responsive 来实现。这种类的本质是为图片设置了以下 CSS 属性：

• max-width: 100%
• height: auto;
• display: block;

这些设置使图片能够在父容器中自动缩放，充分发挥响应式设计的优势。

2. 水平居中图片

如果需要让图片水平居中，可以使用 .center-block 类，而不是常见的 .text-center。这种方法通过设置 display: block; 和 margin: 0 auto; 来实现水平居中。

3. SVG 图像在 IE 8-10 中的显示问题

在 Internet Explorer 8-10 中，使用 .img-responsive 类的 SVG 图像可能会出现尺寸不均匀的情况。解决方法是手动为 SVG 图像添加以下 CSS 属性：

width: 100%;

需要注意的是，Bootstrap 并不自动为所有 SVG 图像应用上述设置，以免影响其他图片格式的显示。

4. Bootstrap 提供的图片类

Bootstrap 提供了多种预定义的图片类，用户可以根据需求选择使用：

• .img-rounded：为图片添加圆角效果，设置 border-radius: 6px;
• .img-circle：让图片呈现圆形，设置 border-radius: 50%
• .img-thumbnail：添加内边距和灰色边框，呈现小缩略图效果

示例代码

以下是一些典型的图片使用示例：

通过合理搭配这些类名，可以轻松实现各种图片样式需求。

总结

Bootstrap 提供了强大且灵活的图片处理功能，能够满足大多数图片显示需求。无论是响应式布局、居中对齐，还是美化效果，用户都能通过简单的类名设置实现。