|
|
復制代碼 代碼如下:
function controlImg(ele,w,h){
var c=ele.getElementsByTagName("img");
for(var i=0;i<c.length;i++){
var w0=c[i].clientWidth,h0=c[i].clientHeight;
var t1=w0/w,t2=h0/h;
if(t1>1||t2>1){
c[i].width=Math.floor(w0/(t1>t2?t1:t2));
c[i].height=Math.floor(h0/(t1>t2?t1:t2));
if(document.all){
c[i].outerHTML='<a href="'+c[i].src+'" target="_blank" title="在新窗口打開圖片">'+c[i].outerHTML+'</a>'
}
else{
c[i].title="在新窗口打開圖片";
c[i].onclick=function(e){window.open(this.src)}
}
}
}
}
window.onload=function(){
controlImg(document.getElementById("content"),670,980);
}
以前就需要這樣的代碼，但因為具體的思路不是和很清楚，今天在blueidea看到的文章，特整理下。
指定區域內的，一般用于控制內容部分的圖片，可通過controlImg(document.getElementById("content"),670,980); 中的content,下面是測試代碼。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
下面是用css expression實現的方法會增加客戶端的負荷，建議用js的
假設有一個id為test的div，如何控制其內的圖片不會撐呢？
如下定義CSS即可：
復制代碼 代碼如下:
#test IMG{
border:0;
margin:0;
padding:0;
max-width:600px;
width:expression(this.width>600?"600px":this.width);
max-height:450px;
height:expression(this.height>450?"450px":this.height);
}
如此定義后，其中的圖片寬就不會超過600，高不超過450，并按原比例值縮??！
JavaScript技術：javascript 指定區域內圖片等比例縮放實現代碼 腳本之家整合版 原創，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
