前端经过background实现图片裁剪显示的方法

前端图片展现

在前端处理图片是很是常见的，而图片展现又存在一个最大的问题：适应，
能够看看这种状况：

1. 固定空间展现图片

   • 空间是 100px100px，图片是 6060
   • 空间是空间是 100px100px，图片是 160px240px
   • 空间是空间是 100px100px，图片是 240px160px

就图片展现而言，按宽高比进行缩放是最好的结果，宽高1：1的话，放到正方形空间内很好，但是若是是1：1.5的图片须要放到正方形页面容器里面呢？

目前须要前端处理的方式是使用background来操做，而不是img元素，须要如下几个属性的配合：

1. background-image ：指定对象的背景图像。能够是真实图片路径或使用渐变建立的“背景图像”
2. background-position ：指定对象的背景图像位置。
3. background-size ：指定对象的背景图像的尺寸大小。
4. background-repeat ：指定对象的背景图像如何铺排填充。
5. background-attachment ：指定对象的背景图像是随对象内容滚动仍是固定的。
6. background-origin ：指定对象的背景图像显示的原点。
7. background-clip ：指定对象的背景图像向外裁剪的区域。
8. background-color ：指定对象的背景颜色。

background的背景图片裁剪

为了使图片可以按照正常的宽高比显示，能够理解成如下几步操做：

1. 固定宽高的容器元素，设置背景图片
2. 把背景图片按照原始的宽高比伸缩，直到可以彻底填充住容器元素的背景，容器的宽高比和背景图片的宽高比不同时，会存在背景图片宽或者高大于容器的状况，；
3. 把背景图片调整，使得多余的图片部分可以相对于容器对称展现，
4. 截去显示在容器外的背景图片，只显示容器内的图片，大功告成；

代码能够以下书写：

background-image: url(test.img);
// background-size这个须要注意，大小须要看伸缩时是宽度会有富余仍是高度会有富余，有富余者为auto，恰好填充满的就是100%
//好比宽高分别： 容器是100px*100px的，图片是240px*200px，那么在缩小填充容器时图片的高度会先触及到容器的边缘，也就是填满容器时，宽度有富余为auto，高度为100%；
background-size: auto 100%;  // 可使用cover
background-position: center; //背景图片居中显示，让多余部分相对容器对此展现
background-repeat: no-repeat;
background-origin: border-box; //从border开始填充
background-clip: border-box;  //border外的多余背景图片不展现，截取掉，

可使用background的缩写模式：

style="background:url(test.img) center/auto 100% no-repeat border-box border-box"

须要注意的是background-size的书写须要看状况而变
background-size这个须要注意，大小须要看伸缩时是宽度会有富余仍是高度会有富余，有富余者为auto，恰好填充满的就是100%

好比宽高分别：
容器是100px100px的，图片是240px200px，那么在缩小填充容器时图片的高度会先触及到容器的边缘，也就是填满容器时，宽度有富余为auto，高度为100%；
background-size: auto 100%;
因此能够考虑使用cover这个值，background-size:cover;

参考：http://css.doyoe.com/properti...