前端經過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...