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

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

文章图片文章图片文章图片

假如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; }

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

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