您的位置:首页 > Web前端 > HTML

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

2008-11-05 15:47 141 查看
限定图像的最大尺寸,可以在<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'); 用于防止上传大图像后,图像的宽度被限定死了。有了这句代码,才能真正地实现保持图像的比例不失真。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: