zoukankan      html  css  js  c++  java
  • 通过JS,按照原比例控制图片尺寸

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Js压缩图片</title>
        <script type="text/javascript" >
            //img:图片对象
            //   w:宽度
            //   h:高度
            function ctlImg(img, w, h) {
                var img_Width = w;
                var img_Height = h;
                var w = img.width;
                var h = img.height;
                if (img.width > img_Width && img.height > img_Height) {
                    if (w / img_Width > h / img_Height) {
                        img.width = img_Width;
                        img.height = parseInt(img_Width / w * h);
                    }
                    else {
                        img.height = img_Height;
                        img.width = parseInt(img_Height / h * w);
                    }
                    return true;
                }
                if (w > img_Width) {
                    img.width = img_Width;
                    img.height = parseInt(img_Width * (h / w));
                } else if (h > img_Height) {
                    img.height = img_Height;
                    img.width = parseInt(img_Height * (w / h));
                }
                return true;
            }
    </script>
    </head>
    <body >
    <img alt="" src="1.jpg "  onload="ctlImg(this,80,60)"/>
    <img alt="" src="2.jpg "  onload="ctlImg(this,800000,600)"/>
    <img alt="" src="3.jpg "  onload="ctlImg(this,80,60)"/>
    <img alt="" src="4.jpg "  onload="ctlImg(this,8000,100)"/>

    </body>
    </html>

  • 相关阅读:
    redies安装
    跟我一起学koa之在koa中使用mongoose(四)
    mongoDB可视化工具RoBo 3T的安装和使用
    跟我一起了解koa之koa洋葱圈模型(二)
    跟我一起了解koa之koa的cookie(三)
    跟我一起了解koa之koa-generator(一)
    2进制数转成10进制
    koa中同步与异步的写法
    bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]
    Bootstrap 杂记
  • 原文地址:https://www.cnblogs.com/chengeng/p/3143559.html
Copyright © 2011-2022 走看看