我們在圖片類網站開發時， 會遇到這個問題： 長方形的圖片，在固定的寬高容器里（DIV），會顯示一豎條，畢竟圖片是寬高是無規則的，這樣一來，看著會有點丑。就如下圖所示：
注意是固定寬高的容量里放的圖片
從上邊的圖，可以看出，一般，我們是固定圖片的最大高度（max-height），這樣圖片不變形的顯示在框里，對於左右空白的，會不會看著很突兀，不協調，甚至有點丑吧（個人看法）。
那麼，我們怎麼來處理左右空白的問題呢？
你也可以把這個問題當成，怎麼自適應圖片呢？ 有一個做法是：把圖片放大（不變形的情況下），佔滿父容器。這樣一來，圖片上的重要信息，可能會被隱藏。 因此，我們的另一個做法是：用顏色填充左右空白。
既然，我們要填充，就要知道顏色值，圖片上就要取色，而且是主色才行，不然看起來也會很突兀。
因此，今天推薦一個取圖片主色並應用到父元素背景上的jQuery插件：
jquery.adaptive-background.js。
先來看一下它的效果圖吧（針對上圖的左右空白處理）
提取圖片顏色並應用到父元素背景上
那麼，什麼是
jquery.adaptive-background.js呢？
它是一個jQuery插件，依賴於jQuery1.8+，實現從一個圖片中提取主要顏色值，並應用到父元素的背景色上。
此插件兼容IE9+，Chrome，Firefox等主流瀏覽器。
那麼，怎麼使用它呢？
首先，你需要到github上搜索：
jquery.adaptive-background.js，然後引入頁面中，接著如圖所示使用就可以了。
簡單的使用此插件的方法
那麼，針對實際效果，我們通過放慢速度，來查看一下
演示此插件的應用效果
是不是，感覺父元素設置了和圖片接近的顏色，看著就好多了。
通過$.adaptiveBackground.run()就可以初始化帶有data-adaptive-background屬性的圖片元素了，這裡的run()，其實是有配置選項的。
比如：run({normalizeTextColor: true})，它表示：如果圖片提取的顏色應用到父元素背景上了，表現的太亮或者太暗，文字顯示不清楚了，就自動調節文字的顏色。舉例如下：
為了達到演示效果，我們延遲了2秒
從圖上，我們看出，文字的顏色從紅色，變成了白色，就是為了不埋沒它。
它還有很多配置，這裡就不一一列舉了，感興趣的朋友可以到github上看一下。
至此，就介紹完這個強大的取色並自適應背景的插件了，也許它的應用場景比較有限，但是一個好的用戶體驗，是我們要關注的，不管它的大小如何。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/273654.html
微信掃一掃 
支付寶掃一掃 