菜单

JS等比例降低图片尺寸的实例

2019年8月3日 - CSS/CSS3

为了进步用户体验,网站用户在上传图片的时候,我们不能让用户自个儿去处理图片以高达我们的供给。

而平时像天猫上货色实物展现这样的页面,我们必要调控的至关重假如图表的大幅度。

又考虑到html页面剖判顺序或然引致的有的标题,决定通过定义二个粗略的效应函数,然后在img成分中加多onload事件来调用的点子进行落实,代码如下:

JS部分

复制代码 代码如下:

<script type=”text/javascript”>
 function changeImg(objImg)
 {
     var most = 690;        //设置最大开间
     if(objImg.width > most)
     {
         var scaling = 1-(objImg.width-most)/objImg.width;   
         //总括缩短比例
         objImg.width = objImg.width*scaling;
         objImg.height = objImg.height;           
//img成分未有安装中度时将自行等比例缩短

         //objImg.height = objImg.height*scaling;   
//img成分设置中度时需实行等比例裁减
     }

 }
 </script>

HTML调用部分

复制代码 代码如下:

 <img src=”” onload=”changeImg(this);” />

你只怕感兴趣的篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图