圖片縮放、居中——這一直是我想解決的問(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)取做到更好。


