图片响应式

img-responsive

 编辑

本词条缺少概述图，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！

img-responsive是图片响应式的意思，在Bootstrap框架中，有一个.img-responsive的CSS样式。应用这个样式以后，图片就会变成响应式图片。

中文名

图片响应式

外文名

img responsive

常    见

Bootstrap中内置样式

目录

1. 1 介绍
2. 2 用法
3. 3 居中

介绍

编辑

img-responsive是图片响应式的意思，在Bootstrap框架中，有一个.img-responsive的CSS样式。应用这个样式以后，图片就会变成响应式图片。

用法

编辑

在BootStrap中，给<img>添加 .img-responsive样式就可以实现图片响应式。

<img src="..." class="img-responsive">

居中

编辑

我们在用bootstrap排版内容的时候，有的时候在内容中需要图片水平居中对齐 [1]  。

一般情况下，我们的图片都使用了 .img-responsive 类来实现响应式图片。如果需要实现响应式图片水平居中，那么我们要使用 .center-block 类，不要用 .text-center

<p><img class="img-responsive center-block" src="..." /></p>

参考资料

• 1.  Bootstrap中如何让响应式图片（img-responsive）水平居中   ．天辰的博客．2015-12-17[引用日期2016-09-30]