圖片縮放、居中——這一直是我想解決的問題。因為對于正規性的網站來說，圖片都是要經過處理才上傳到頁面上去的，但是一般的企業或是小行業網站，編輯又怎么會去處理下圖片的尺寸呢，最多也就是改一下水印。所以上傳到網站上后顯示出來的圖片就感覺像是變了形，一點也不美觀。

前不久在做一個WP模版時找了個小插件（暫且命名為VLoadedImg）我改了下，終于可以實現圖片按比例縮放，并且居中顯示了。但是這個小插件還是有個小問題，雖然圖片沒有變形，但是因為是按比例縮放到指定容器中全部顯示，所以如果圖片的比例與容器不一致，那上下或左右的留白就會比較多，頁面中圖片多的話對于正規正矩的頁面來說也不是很美觀。

今天無意瀏覽博客時，在WEB前端開發上看到了一個好的小插件——VMiddleImg，試了下感覺蠻不錯的，不僅可以實現圖片居中而且還可以縮放裁剪（當然不是真正意義上的裁剪，只是把不顯示的隱藏起來了）。

話回來還是先說說這VMiddleImg

此腳本擬達到以下需求：

1、當圖片高或寬超過父容器時截取中間部分顯示。

2、當圖片寬高小于父容器時，居中顯示。

3、插件中”width”和”height”兩個參數可以設定圖片實際輸出的寬度。

4、可以通過樣式設置圖片的偏移位置，例如.themes2 li a img{ margin-top: -5px; margin-left: -5px}；

5、第3點和第4點結合可以盡可能的解決一個問題，就是解決圖片邊緣模糊是造成視覺上的不爽。

不爽之處：

1、圖片上要加上width和height

2、無預加載效果

演示地址：在線演示

下載地址：115下載

之前用的那個VLoadedImg也總結了下

此腳本擬達到以下需求：

1、當圖片高或寬超過父容器時按比例縮放。

2、當圖片小于父容器時，居中顯示。

3、顯示預加載效果。

不爽之處：

1、不能裁剪

演示地址：在線演示

下載地址：115下載

怎么樣，有你想要的嘛？至于插件中存在的小喝下我向鳥建議下。爭取做到更好。