限定图像的最大尺寸,可以在<img>的onload属性中设置图像的宽度和高度,如果还要保持图像的比例的话,那就只需要设定其中一个属性就行了。这里以上传图片为例,代码如下所示:
- <img id="show" src="" onload="if(this.width >= 320){this.width = 320}" align="middle"/>
- <br>
- 请选择上传的文件:<input type="file" name="picture" onchange="show.removeAttribute('width');show.src=this.value"/>
第一行代码是一个图像框,用户选择了图像文件后,该图像框将会显示出图像,若图像的宽度大于320px时,将以缩略图显示图像。代码 show.removeAttribute('width'); 用于防止上传大图像后,图像的宽度被限定死了。有了这句代码,才能真正地实现保持图像的比例不失真。