我们在浏览网站的时候发现，很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分，这里我们介绍两种方式，

我简单定义为三部曲： - 让包裹图片的盒子绝对定位， - left:50%, - Margin-left：图片宽度的一半 看例子吧：

既然让图片自适应不同的屏幕，也就是说不光是pc端还有移动端。那我就根据一个例子详细介绍一下。这里我们用bootstrap框架做一个轮播效果图，来实现图片在不同屏幕下的图片的响应式效果。

对bootstrap封装好的代码进行改进。 我们重点修改了轮播图片的内容。 一步一步来介绍：

我们给div设置好背景图之后，由于没有给div设置高度，背景图是看不到的。所以做如下调整：

简单解释一下：background-size 因为我们要考虑 :万一我们的背景图片没有410的高度，图片有可能只是居中展示一小块，所以用background-size去控制一下。 语法：background-size: length|percentage|cover|contain;

这样就可以让图片自适应了，但是还是不够的，为什么呢。我们要知道： 实现图片响应式的目的是：各种终端都需要正常显示图片；移动端应该使用更小的图片，小指体积 如果我们用手机端去访问我们的页面，那么就需要把图片下载到本地，这就要需要流量 用户肯定希望流量越少越好啊。如果下载了超大的图，其实是并不需要的，那岂不是浪费很多流量。 那我们就希望针对不同的屏幕使用不同的图片， 大屏幕用大图，小屏幕呢就是用小图 针对pc端 图片自适应（因为pc端也有不同尺寸的屏幕），针对移动端就做一个单独的图片。 解决思路： 当屏幕的尺寸发生变化的时候，我们获取一下屏幕的宽度，当屏幕的宽度小于一定的值我们就认为是手机屏幕，就显示小图 ；大于一定尺寸就认为是pc端 使用大图。 但是一开始就不能显示图片吧，图片应该动态加载图片。div在某种状态显示某种图片，应该根据div的属性去展示吧 这就用使用data-属性，data属性专门记录与div相关的属性 代码修改为:

需要小图的时候，尺寸等比例变化，所小图时使用img方式,在div中添加img标签。同时当使用小图的时候，父盒子的高度就不为410px了，这可以用媒体查询的方式控制盒子的高度。 当图片不足以撑满整个盒子时，图片的宽度为100% css代码：

data-属性并不起作用，仅仅是记录数据的。当要显示图片时，用js脚本在不同屏幕下显示不同的图片尺寸。 js代码（这里用的是jquery）：

完整html代码：

ok，通过以上方式就可以实现图片的居中显示并产生响应式效果。