圖片完美縮放
更新時(shí)間：2006年09月07日 00:00:00 作者：
在公司的工作經(jīng)常要為客戶(hù)作產(chǎn)品展示的頁(yè)面，由于客戶(hù)上傳的圖片格式大小不一，縮放后會(huì)導(dǎo)致變形，于是在星期天抽了點(diǎn)時(shí)間，寫(xiě)了一段JS代碼，支持圖片的完美縮放。
首先給圖片加個(gè)<div></div>標(biāo)簽對(duì)，img中不能定義高度或?qū)挾?，如下?
<div class="product_img_div"><img src="images/test.jpg" class="product_img" /></div> 在CSS中寫(xiě)入代碼：.product_img_div {width:210px;height:190px;overflow:hidden}
作用是控制圖片載入時(shí)，溢出部分隱藏，這樣就不會(huì)把界面撐得太難看。
ReSizeImg("product_img",200,180);
function ReSizeImg(cName,w,h){
var reImgs = document.getElementsByTagName("img");
for (j=0;j<reImgs.length;j++){
if (reImgs[j].className==cName && (reImgs[j].height>h || reImgs[j].width>w)) {
if (reImgs[j].height==reImgs[j].width) {
reImgs[j].height=h;reImgs[j].width=w;
} else if (reImgs[j].height>reImgs[j].width) {
reImgs[j].height=h;
} else if (reImgs[j].height<reImgs[j].width){
reImgs[j].width=w;
}
}
}
}
測(cè)試后，圖片大小完美縮放，也解決了在載入時(shí)會(huì)把界面撐得很難看的問(wèn)題。
首先給圖片加個(gè)<div></div>標(biāo)簽對(duì)，img中不能定義高度或?qū)挾?，如下?
<div class="product_img_div"><img src="images/test.jpg" class="product_img" /></div> 在CSS中寫(xiě)入代碼：.product_img_div {width:210px;height:190px;overflow:hidden}
作用是控制圖片載入時(shí)，溢出部分隱藏，這樣就不會(huì)把界面撐得太難看。
復(fù)制代碼 代碼如下:
ReSizeImg("product_img",200,180);
function ReSizeImg(cName,w,h){
var reImgs = document.getElementsByTagName("img");
for (j=0;j<reImgs.length;j++){
if (reImgs[j].className==cName && (reImgs[j].height>h || reImgs[j].width>w)) {
if (reImgs[j].height==reImgs[j].width) {
reImgs[j].height=h;reImgs[j].width=w;
} else if (reImgs[j].height>reImgs[j].width) {
reImgs[j].height=h;
} else if (reImgs[j].height<reImgs[j].width){
reImgs[j].width=w;
}
}
}
}
測(cè)試后，圖片大小完美縮放，也解決了在載入時(shí)會(huì)把界面撐得很難看的問(wèn)題。
相關(guān)文章
7. Microsoft Online-Crash Control, version 6.0(微軟在線(xiàn)崩潰控件)
7. Microsoft Online-Crash Control, version 6.0(微軟在線(xiàn)崩潰控件)...2007-08-08
讓getElementsByName適應(yīng)IE和firefox的方法
讓getElementsByName適應(yīng)IE和firefox的方法...2007-09-09
js實(shí)現(xiàn)的點(diǎn)擊數(shù)量加一可操作數(shù)據(jù)庫(kù)
這篇文章主要介紹了js如何實(shí)現(xiàn)的點(diǎn)擊數(shù)量加一操作數(shù)據(jù)庫(kù),需要的朋友可以參考下2014-05-05
本文主要給大家分享的是一則javascript實(shí)現(xiàn)的自定義右鍵行為的小技巧，非常的簡(jiǎn)單實(shí)用，有相同需求的小伙伴可以參考下。2015-03-03
下面小編就為大家?guī)?lái)一篇json傳值以及ajax接收詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
本文是javascript插件化開(kāi)發(fā)系列教程的第六篇文章，還是重點(diǎn)對(duì)上一篇文章不足的地方進(jìn)行改進(jìn)重構(gòu)，逐步分析讓大家能有一個(gè)新的認(rèn)識(shí)，希望小伙伴們能夠喜歡。2015-02-02
使用iconfont字體圖標(biāo)可以隨意改變大小,避免圖片放大失真問(wèn)題,但是值得注意,修改字體圖標(biāo)大小的時(shí)候使用font-size屬性,并且顏色可隨意更改,本文給大家介紹iconfont的N種使用方法,感興趣的朋友一起看看吧2024-01-01
js實(shí)現(xiàn)鍵盤(pán)上下左右鍵選擇文字并顯示在文本框的方法
這篇文章主要介紹了js實(shí)現(xiàn)鍵盤(pán)上下左右鍵選擇文字并顯示在文本框的方法,涉及javascript操作鍵盤(pán)事件及文本框的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
javascript 面向?qū)ο骹unction詳解及實(shí)例代碼
這篇文章主要介紹了javascript 面向?qū)ο骹unction詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
下面小編就為大家?guī)?lái)一篇基于ajax和jsonp的原生封裝(實(shí)例)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10