圖片縮放、居中——這一直是我想解決的問(wèn)題。因?yàn)閷?duì)于正規(guī)性的網(wǎng)站來(lái)說(shuō)，圖片都是要經(jīng)過(guò)處理才上傳到頁(yè)面上去的，但是一般的企業(yè)或是小行業(yè)網(wǎng)站，編輯又怎么會(huì)去處理下圖片的尺寸呢，最多也就是改一下水印。所以上傳到網(wǎng)站上后顯示出來(lái)的圖片就感覺(jué)像是變了形，一點(diǎn)也不美觀。

前不久在做一個(gè)WP模版時(shí)找了個(gè)小插件（暫且命名為VLoadedImg）我改了下，終于可以實(shí)現(xiàn)圖片按比例縮放，并且居中顯示了。但是這個(gè)小插件還是有個(gè)小問(wèn)題，雖然圖片沒(méi)有變形，但是因?yàn)槭前幢壤s放到指定容器中全部顯示，所以如果圖片的比例與容器不一致，那上下或左右的留白就會(huì)比較多，頁(yè)面中圖片多的話對(duì)于正規(guī)正矩的頁(yè)面來(lái)說(shuō)也不是很美觀。

今天無(wú)意瀏覽博客時(shí)，在WEB前端開(kāi)發(fā)上看到了一個(gè)好的小插件——VMiddleImg，試了下感覺(jué)蠻不錯(cuò)的，不僅可以實(shí)現(xiàn)圖片居中而且還可以縮放裁剪（當(dāng)然不是真正意義上的裁剪，只是把不顯示的隱藏起來(lái)了）。

話回來(lái)還是先說(shuō)說(shuō)這VMiddleImg

此腳本擬達(dá)到以下需求：

1、當(dāng)圖片高或?qū)挸^(guò)父容器時(shí)截取中間部分顯示。

2、當(dāng)圖片寬高小于父容器時(shí)，居中顯示。

3、插件中”width”和”height”兩個(gè)參數(shù)可以設(shè)定圖片實(shí)際輸出的寬度。

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

5、第3點(diǎn)和第4點(diǎn)結(jié)合可以盡可能的解決一個(gè)問(wèn)題，就是解決圖片邊緣模糊是造成視覺(jué)上的不爽。

不爽之處：

1、圖片上要加上width和height

2、無(wú)預(yù)加載效果

演示地址：在線演示

下載地址：115下載

之前用的那個(gè)VLoadedImg也總結(jié)了下

此腳本擬達(dá)到以下需求：

1、當(dāng)圖片高或?qū)挸^(guò)父容器時(shí)按比例縮放。

2、當(dāng)圖片小于父容器時(shí)，居中顯示。

3、顯示預(yù)加載效果。

不爽之處：

1、不能裁剪

演示地址：在線演示

下載地址：115下載

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