HTML限定图像最大尺寸并保持原有比例

 

    限定图像的最大尺寸，可以在<img>的onload属性中设置图像的宽度和高度，如果还要保持图像的比例的话，那就只需要设定其中一个属性就行了。这里以上传图片为例，代码如下所示：

1. <img id="show" src="" onload="if(this.width >= 320){this.width = 320}" align="middle"/>
2. <br>
3. 请选择上传的文件：<input type="file" name="picture" onchange="show.removeAttribute('width');show.src=this.value"/>

    第一行代码是一个图像框，用户选择了图像文件后，该图像框将会显示出图像，若图像的宽度大于320px时，将以缩略图显示图像。代码 show.removeAttribute('width'); 用于防止上传大图像后，图像的宽度被限定死了。有了这句代码，才能真正地实现保持图像的比例不失真。