导航:首页 > 编程语言 > 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相关的资料

热点内容
ps前往文件夹 浏览:694
信捷plc编程用哪个软件 浏览:939
vba导入文件 浏览:690
更新后版本英文怎么说 浏览:267
桌面云配置文件分离 浏览:505
iphone5如何升级4g网络 浏览:5
团购是在哪个app 浏览:897
打开多个word文档图片就不能显示 浏览:855
腾讯新闻怎么切换版本 浏览:269
app安装失败用不了 浏览:326
桌面文件鼠标点开会变大变小 浏览:536
手机误删系统文件开不了机 浏览:883
微信兔子甩耳朵 浏览:998
android蓝牙传文件在哪里 浏览:354
苹果6s软解是真的吗 浏览:310
c语言代码量大 浏览:874
最新网络卫星导航如何使用 浏览:425
以下哪些文件属于图像文件 浏览:774
zycommentjs 浏览:414
确认全血细胞减少看哪些数据 浏览:265

友情链接