纯css3实现图片等比例缩放+全屏居中

    在手边的项目遇到了一点问题，须要从后台拿取图片外链再展现在前台的详情页里。可是外层容器的大小是固定的。而从外联的图片传回来的确实大小不一横竖不定的图片。

参考了网上现成的解决方案作了修改后算是解决了这个问题。

解决代码以下：由于这段代码的测试图片是一只小猫，故给这段代码的类名定为：forcat（啊，我真是萌萌哒的女程序媛啊）

.forcat{
width: 100%;
height: 250px;
overflow: hidden;
background-image:url(); /*图片地址*/
background-origin:content; /*从content区域开始显示背景*/
background-position:50% 50%; /*图片上下左右居中*/
background-size:cover; /*保持图像自己的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域*/
background-repeat:no-repeat; /*图像不重复显示*/
}

这里有一点是background-size属性设置为：contain，和cover之间的区别。

上图。

就是这只猫猫啦。最开始拉过来的数据直接只能显示猫猫的头上一撮毛。就是由于图片没有办法等比例缩放。

这是background-size属性设置为：contain时候的显示结果。

下面是background-size属性设置为：cover的结果。完整看到猫猫了对不对。

附，ajax处理数据代码。这里面是没有图片的。是用背景实现的。

$.each(data.img,function(i){ $("div.am-slider ul").append( "<li class='forcat' style='background-image:url("+data.img[i].img+")'></li>" );