圖片完美縮放
更新時間:2006年09月07日 00:00:00 作者:
在公司的工作經常要為客戶作產品展示的頁面,由于客戶上傳的圖片格式大小不一,縮放后會導致變形,于是在星期天抽了點時間,寫了一段JS代碼,支持圖片的完美縮放。
首先給圖片加個<div></div>標簽對,img中不能定義高度或寬度,如下:
<div class="product_img_div"><img src="images/test.jpg" class="product_img" /></div> 在CSS中寫入代碼:.product_img_div {width:210px;height:190px;overflow:hidden}
作用是控制圖片載入時,溢出部分隱藏,這樣就不會把界面撐得太難看。
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;
}
}
}
}
測試后,圖片大小完美縮放,也解決了在載入時會把界面撐得很難看的問題。
首先給圖片加個<div></div>標簽對,img中不能定義高度或寬度,如下:
<div class="product_img_div"><img src="images/test.jpg" class="product_img" /></div> 在CSS中寫入代碼:.product_img_div {width:210px;height:190px;overflow:hidden}
作用是控制圖片載入時,溢出部分隱藏,這樣就不會把界面撐得太難看。
復制代碼 代碼如下:
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;
}
}
}
}
測試后,圖片大小完美縮放,也解決了在載入時會把界面撐得很難看的問題。
相關文章
原生JS實現(xiàn)循環(huán)Nodelist Dom列表的4種方式示例
這篇文章主要介紹了原生JS實現(xiàn)循環(huán)Nodelist Dom列表的4種方式,結合具體實例形式分析了javascript循環(huán)遍歷Nodelist Dom列表的常用操作技巧,需要的朋友可以參考下2018-02-02JavaScript數(shù)組實現(xiàn)數(shù)據(jù)結構中的隊列與堆棧
這篇文章主要介紹了JavaScript數(shù)組實現(xiàn)數(shù)據(jù)結構中的隊列與堆棧的相關資料,需要的朋友可以參考下2016-05-0510個很少使用的JavaScript?Console方法分享
你一定聽說過?console.log()?,而且可能一直在使用它,在本文中,我們將探討一些最有用的控制臺方法,以及它們在數(shù)據(jù)可視化、調試等方面的用途,感興趣的小伙伴可以學習一下2023-09-09