实用技巧：js图片等比缩放

最新推荐文章于 2024-04-28 10:51:27 发布

皆普

最新推荐文章于 2024-04-28 10:51:27 发布

阅读量1.8k

点赞数

文章标签： function 数据结构 div html null

本文链接：https://blog.csdn.net/wj800/article/details/7002682

版权

经常看到一些网页，其中的图片比例失调，这里提供一组方法，供需要的朋友参考。基本构思如下：

1、在指定宽度和高度范围内等比例最大化缩放图片；

2、按指定宽度等比最大化缩放图片；

3、按指定高度等比最大化缩放图片。

原方法在pvo.js文件中，为了便于交流，在这里做了修改。

<!--
胡开明
2011-11-23
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>等比缩放图片</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">

            /**
             *定义缩放的数据结构
             */
            var scale={
                width:null,
                height:null
            };

            /**
             *@see cn.hkm.web.Picture.java
             *在指定宽度和高度范围内最大化缩放图片
             *@param width  图片原始宽度
             *@param height 图片原始高度
             *@param outWidth  指定宽度范围
             *@param outHeight 指定宽度范围
             */

            var scaleWH=function(width,height,outWidth,outHeight){
                width=parseInt(width);
                height=parseInt(height);
                outWidth=parseInt(outWidth);
                outHeight=parseInt(outHeight);

                var h=width;
                var w=height;
                var r=height/width;
                var rs=outHeight/outWidth;
                if((width<=outWidth)&&(height<=outHeight)){
                    w=width;
                    h=height;
                }
                if((width<=outWidth)&&(height>outHeight)){
                    w=parseInt(outHeight/r);
                    h=outHeight;
                }
                if((width>outWidth)&&(height<=outHeight)){
                    w=outWidth;
                    h=parseInt(outWidth*r);
                }
                if((width>outWidth)&&(height>outHeight)){
                    if(r<rs){
                        w=outWidth;
                        h=parseInt(outWidth*r);
                    }
                    if(r>rs){
                        h=outHeight;
                        w=parseInt(outHeight/r);
                    }
                    if(r==rs){
                        w=outWidth;
                        h=outHeight;
                    }
                }
                scale.width=w;
                scale.height=h;
                return scale;
            }

            /**
             *@see cn.hkm.web.Picture.java
             *在指定宽度范围内最大化缩放图片
             *@param width  图片原始宽度
             *@param height 图片原始高度
             *@param outWidth  指定宽度范围
             */
            var scaleW=function(width,height,outWidth){
                width=parseInt(width);
                height=parseInt(height);
                outWidth=parseInt(outWidth);
                if(width<outWidth){
                    scale.width=width;
                    scale.height=height;
                }else{
                    scale.width=outWidth;
                    scale.height=parseInt(outWidth*height/width);
                }
                return scale;
            }


            /**
             *@see cn.hkm.web.Picture.java
             *在指定高度范围内最大化缩放图片
             *@param width  图片原始宽度
             *@param height 图片原始高度
             *@param outWidth  指定宽度范围
             */
            var scaleH=function(width,height,outHeight){
                width=parseInt(width);
                height=parseInt(height);
                outHeight=parseInt(outHeight);
                if(height<outHeight){
                    scale.width=width;
                    scale.height=height;
                }else{
                    scale.width=parseInt(outHeight*width/height);
                    scale.height=outHeight;
                }
                return  scale;
            }

            function see(){
                scale=scaleWH(1366,768,600,600);
                document.getElementById("byWH").innerHTML="<img src='images/img001.png' width='"+scale.width+"px' height='"+scale.height+"px'  />";

                scale=scaleW(1366,768,500);
                document.getElementById("byW").innerHTML="<img src='images/img001.png' width='"+scale.width+"px' height='"+scale.height+"px'  />";

                scale=scaleH(1366,768,300);
                document.getElementById("byH").innerHTML="<img src='images/img001.png' width='"+scale.width+"px' height='"+scale.height+"px'  />";

            }

        </script>
    </head>
    <body οnlοad="see()" >

        <div id="byWH"></div>
        <br/>
        <div id="byW"></div>
        <br/>
        <div id="byH"></div>
    </body>
</html>

皆普

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实用技巧：js图片等比缩放

经常看到一些网页，其中的图片比例失调，这里提供一组方法，供需要的朋友参考。基本构思如下：1、在指定宽度和高度范围内等比例最大化缩放图片；2、按指定宽度等比最大化缩放图片；3、按指定高度等比最大化缩放图片。原方法在pvo.js文件中，为了便于交流，在这里做了修改。  等比缩放图片
复制链接

扫一扫