前端图片显示前端处理图片很常见，但是图片显示有一个最大的问题：适配，你可以看这种情况：固定空间显示图片空间为100px100px，图片为6060，空间为100px100px，图片为160px240px，空间为100px100px，图片为240px160px。就图片显示而言，按照宽高比缩放是最好的结果。如果宽高是1:1，放在一个正方形的空间里很好，但是如果一张1:1.5的图片需要放在一个正方形的页面容器里怎么办？目前前端的处理方式是使用background代替img元素，这需要以下属性的配合：background-image：指定对象的背景图片。可以是真实的图片路径，也可以是用渐变创建的“背景图片”background-position：指定对象的背景图片位置。background-size：指定对象背景图像的大小。background-repeat：指定对象的背景图像将如何布置和填充。background-attachment：指定对象的背景图像是随对象的内容滚动还是固定的。background-origin：指定对象背景图像显示的原点。background-clip：指定对象的背景图像向外剪切的区域。background-color：指定对象的背景颜色。背景的背景图片裁剪可以理解为为了让图片按照正常的宽高比显示，有以下几个步骤：固定容器元素的宽高，设置背景图片，根据拉伸背景图片原始纵横比，直到可以完全填满保持容器元素的背景。当容器的纵横比与背景图片的纵横比不同时，会出现背景图片的宽度或高度大于容器的情况；调整背景图片，让多余的图片部分可以相对于容器显示对称，剪掉显示在容器外的背景图片，只显示容器内的图片，就大功告成了；代码可以这样写：background-image:url(test.img);//background-size需要注意，需要缩放size当width或者height有盈余的时候，有盈余的就是auto，而刚刚填充的是100%//比如宽高分别是：容器是100px*100px，图片是240px*200px，然后缩小填充容器当图片高度会先触及容器的边缘，即当容器被填充时，宽度为auto，高度为100%；背景大小：自动100%；//你可以使用coverbackground-position:center;//背景图居中显示，这样多余的部分相对于容器显示background-repeat:no-repeat;background-origin:border-box;//从边框填充background-clip:border-box;//边框外多余的背景图片不显示，截取，可以使用背景的缩写方式：style="background:url(test.img)center/auto100%no-repeatborder-boxborder-box”需要注意的是background-size需要写视情况需要注意background-size。大小取决于拉伸时宽度或高度是否有多余部分。如果有盈余，它将是自动的。如果刚刚填充，它将是100%。比如宽高分别是：容器是100px100px，图片是240px200px，所以收缩填充容器的时候，图片的高度会先触及容器的边缘，也就是填充容器的时候，宽度为自动，高度为100%；背景大小：自动100%；所以可以考虑使用cover的值，background-size:cover;参考：http://css.doyoe.com/properti...
