前端通過background實現圖片裁剪顯示的方法

caoweiju發表於2017-10-18
前端

前端圖片展示

在前端處理圖片是非常常見的，而圖片展示又存在一個最大的問題：適應，
可以看看這種情況：

  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…

相關文章