轮播图，图片太宽太高会变形，并且不居中问题解决办法

之前做轮播图的时候，设计给的图片又长有宽，引入之后图片会被压缩变形，并且不居中，于是自己百度了一下，感觉一些方法太繁琐，自己最后用一种办法解决了，觉得也很简单，分享出来供大家参考。

我是用ul，li布局的，代码如下：

<div class="lunbo w100 h536 pos1" id="lunbo"><ul class="banner "><li class="onshow"><a href="javascript:;"><img src="img/banner1.jpg" /></a></li><li><a href="javascript:;"><img src="img/banner2.jpg" /></a></li><li><a href="javascript:;"><img src="img/banner3.jpg" /></a></li></ul></div>

假如img的宽度为1920px，css代码如下：

.banner{width: 100%;  height: 536px; overflow: hidden; position: relative;}
.banner li{width: 1920px; height: 100%; text-align: center; display: none; overflow: hidden; position: absolute; top: 0; left: 50%; margin-left: -960px;}
.banner li a{display: block; width: 100%; height: 100%;}
.banner li.onshow{display: block;}
.banner li a img{width: 100%; height: 100%; border: 0; }

这样的话，图片就不会变形，并且是上下左右绝对居中。