图片大小如何设置在js中_JS控制图片放大和缩小怎么改

A. 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%;}

这样图片会自动缩放到和其父容器等宽。

B. 怎么在js 里面限制上传图片的大小不能超过 1M

这样设置的：

1、先用form标签创建一个上传的表单。

<formid="form1"name="form1"method="post"action=""enctype="multipart/form-data">早高
<p><inputtype="hidden"name="MAX_FILE_SIZE"value="100000"/></p>
<p><inputname="userfile"id="userfile"type="file"onchange="check()"/></p>
</form>

2、用Javascript设置格式和大小。

<scriptlanguage="JavaScript"type="text/javascript">functioncheck()迟睁祥{varaa=document.getElementById("userfile").value.toLowerCase().split('.');//以“.”分隔上传文件字符串//varaa=document.form1.userfile.value.toLowerCase().split('.');//以“.”分隔上传文件字符串if(document.form1.userfile.value==""){alert('图片不能为空！');returnfalse;}else{if(aa[aa.length-1]=='gif'||aa[aa.length-1]=='jpg'码搏||aa[aa.length-1]=='bmp'
||aa[aa.length-1]=='png'||aa[aa.length-1]=='jpeg')//判断图片格式{varimagSize=document.getElementById("userfile").files[0].size;alert("图片大小："+imagSize+"B")if(imagSize<1024*1024*1)alert("图片大小在1M以内，为："+imagSize/(1024*1024)+"M");returntrue;}else{alert('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg的图片');//returnfalse;}}}</script>

图片超过1M则不能上传如图：

C. 如何利用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>


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

D. 如何用JS改变图像的原始大小

用JS改变图像的原始大小方法：
var canvas = document.getElementById("canvas"蠢谨);

var context = canvas.getContext("2d");

$('input[type=file]').change(function(){

var file=this.files[0];
var reader=new FileReader();
var image=new Image();

reader.readAsDataURL(file);
reader.onload=function(){
// 通过 reader.result 来访问生成的 DataURL
var url=reader.result;
image.src=url;
alert(image.width);
alert(image.height);
image.height /=4;
image.width /=4;
canvas.setAttribute("width"派拍, image.width+"px"带羡基);
canvas.setAttribute("height", image.height+"px");
alert(image.naturalWidth);
alert(image.naturalHeight);
context.drawImage(image,0,0,image.width,image.height);
};
});

E. 如何利用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>

F. 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中

与图片大小如何设置在js中相关的资料