導航:首頁 > 編程語言 > js修改img的width

js修改img的width

發布時間:2023-04-28 01:20:36

⑴ 用js設置圖片寬度

這種情況用CSS來控制最合適。例如你想讓初始圖片顯示為100px*100px,則:
<img src="images/pic.png" width="100" height="100" />

或者:

<img src="images/pic.png" style="width:100px; height:100px" />

當頁版面中圖片非常多,且要權求每張圖片的大小依據其父容器來固定怎麼辦?可以使用max-weight:

img {max-weight:100%;}

這樣圖片會自動縮放到和其父容器等寬。

⑵ 如何利用JS或者CSS樣式來自動調整圖片大小

js版和css版自動按比例調整圖片大小方法,分別如下:

<title>javascript圖片大小處理函數</title>
<scriptlanguage=Javascript>
varproMaxHeight=150;
varproMaxWidth=110;
functionproDownImage(ImgD){
varimage=newImage();
image.src=ImgD.src;
if(image.width>0&&image.height>0){
varrate=(proMaxWidth/image.width<proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate<=1){
ImgD.width=image.width*rate;
ImgD.height=image.height*rate;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
</script>
</head>
<body>
<imgsrc="999.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
<imgsrc="room.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
</body>

純css的防止圖片撐破頁面的代碼,圖片會自動按比例縮小:

<styletype="text/css">
.content-width{MARGIN:auto;WIDTH:600px;}
.content-widthimg{MAX-WIDTH:100%!important;HEIGHT:auto!important;width:expression(this.width>600?"600px":this.width)!important;}
</style>


<divclass="content-width">
<p><imgsrc="/down/js/images/12567247980.jpg"/></p>
<p><imgsrc="/down/js/images/12567247981.jpg"/></p>
</div>

⑶ web中img標簽通過js的修改寬度後,什麼情況高度會自動按比例變化嗎

設置img的height為auto就好了,這個時候你改變寬度,圖片就會按照等比例改變!

⑷ jS控制圖片的放大和縮小

用js控制圖片額大小。主要是修改圖片的寬度和高度。下面是簡單的代碼實專現:

HTML 代碼:

<imgsrc='../1.jgp'id='img'/>

這個時候img的圖屬片自身是多大,就會顯示多大。100px*100px的圖。

js代碼:

varoImg=document.getElementById('img');
oImg.width='50px';//當給img標簽的寬度設置為50px後,高度會自動按比例縮小。
oImg.width='200px'//當給img標簽的寬度設置為200px後,高度會自動按比例擴大。

⑸ JS控制圖片放大和縮小怎麼改

用js控制圖片額大小。主要是修改圖片的寬度和高度。下面是簡單的代碼實現:

HTML 代碼:

<imgsrc='../1.jgp'id='img'/>

這個時候img的圖片自身是多大,就會顯示多大。100px*100px的圖。

js代碼:

varoImg=document.getElementById('img');
oImg.width='50px';//當給img標簽的寬度設置為50px後,高度會自動按比例縮小。
oImg.width='200px'//當給img標簽的寬度設置為200px後,高度會自動按比例擴大。

⑹ 怎麼js設置Img的寬度,和高度

變數沒什麼問題的
你看看,這個s有沒有值
是不是載入js時,還沒到body那兒,也就計算不出客戶端的寬度

⑺ js控制圖片高度、寬度

//給你一個比較靈活的,可自由控制
jQuery(window).load(function(){
jQuery(".div1img").each(function(){//div1下的img寬度、高度設置
DrawImage(this,700,470);//寬700,高470,自己改為相同即可。
});
});
functionDrawImage(ImgD,FitWidth,FitHeight){//下面是判斷,可自己修改條件
varimage=newImage();
image.src=ImgD.src;
if(image.width>0&&image.height>0){
if(image.width/image.height>=FitWidth/FitHeight){
if(image.width>FitWidth){
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}else{
if(image.height>FitHeight){
ImgD.height=FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}

⑻ 請問用js調整img的寬和高

應該是你沒有設置id吧
試一下下面的,都可以改變圖像的大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<SCRIPT Language="JavaScript">
function che()
{
document.getElementById("e").style.width = '1610px';
}
</SCRIPT>
</head>

<body onload="che()">
<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif" id="e" name="e"/>
</body>
</html>

閱讀全文

與js修改img的width相關的資料

熱點內容
win10磁碟自檢文件丟失 瀏覽:475
win10掃描的文件在哪裡 瀏覽:615
pdf文件公章歪了怎麼處理 瀏覽:322
java下載文件的路徑 瀏覽:551
現在有哪些熱門的軟體編程 瀏覽:453
asp什麼文件迅雷下載 瀏覽:381
巫妖王之怒升級路線 瀏覽:348
wps如何發送文件 瀏覽:359
網站怎麼加流量 瀏覽:457
聖魔之光石破解版本 瀏覽:110
湖北文件櫃多少錢一套 瀏覽:103
artlantis渲染器教程 瀏覽:679
360系統文件可以清理嗎 瀏覽:256
extjsform樣式 瀏覽:513
電信貓怎麼設置wifi密碼 瀏覽:785
p190文件用什麼打開 瀏覽:252
怎麼修改ps簽署文件 瀏覽:847
怎麼找到編程貓作品文件 瀏覽:647
鐵路局的網站是多少 瀏覽:194
微信雙號 瀏覽:926

友情鏈接