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

JS控制图片按比例缩放并不超过一定宽度和高度(居中对齐)

2016-06-16 13:29 603 查看
//JS控制图片按比例缩放并不超过一定宽度和高度(两种方法,在此使用第二种)

        function Wa_SetImgAutoSize(obj) {

            //var img=document.all.img1;//获取图片

            var img = obj;

            var MaxWidth = 630; //设置图片宽度界限

            var MaxHeight = 360; //设置图片高度界限

            var HeightWidth = img.offsetHeight / img.offsetWidth; //设置高宽比

            var WidthHeight = img.offsetWidth / img.offsetHeight; //设置宽高比

            if (img.readyState != "complete") return false; //确保图片完全加载

            if (img.offsetWidth > MaxWidth) {

                img.width = MaxWidth;

                img.height = MaxWidth * HeightWidth;

            }

            if (img.offsetHeight > MaxHeight) {

                img.height = MaxHeight;

                img.width = MaxHeight * WidthHeight;

            }

        }

        //调用:<img src="图片" onload="Wa_SetImgAutoSize(this)">

        //图片按比例缩放

        var flag = false;

        function DrawImage(ImgD) {

            var image = new Image();

            var iwidth = 630;            //定义允许图片宽度,当宽度大于这个值时等比例缩小

            var iheight = 360;            //定义允许图片高度,当宽度大于这个值时等比例缩小

            var minwidth=iwidth*0.7;//图片最小宽度小于定义百分比;

            var minheight=iheight*0.7;//图片最小高度小于定义百分比

            image.src = ImgD.src;

            if (image.width > 0 && image.height > 0) {         //假如图片长宽都不为零

                flag = true;

                if (image.height / image.width >= iheight / iwidth) {       //通过正弦值判断图片缩放后是否偏高

                    if (image.height > iheight) {        //如果图片比设定的要高

                        ImgD.height = iheight;

                        ImgD.width = (image.width * iheight) / image.height;

                    } else {

                        ImgD.width = image.width;

                        ImgD.height = image.height;

                        //假如图片width<70%(设定)&&heitht<70%(设定)

                        if ( image.height < minheight) {

                            ImgD.height = minheight;

                            ImgD.width = (image.width * minheight) / image.height;

                        }

                    }

                    ImgD.alt = image.width + "×" + image.height;

                }

                else {           //如果图片比例 小于 设定的比例

                    if (image.width > iwidth) {

                        ImgD.width = iwidth;

                        ImgD.height = (image.height * iwidth) / image.width;

                    } else {

                        ImgD.width = image.width;

                        ImgD.height = image.height;

                        //假如图片width<70%(设定)&&heitht<70%(设定)

                        if (image.width <= minwidth ) {

                            ImgD.width = minwidth;

                            ImgD.height = (image.height * minwidth) / image.width;

                        }

                    }

                    ImgD.alt = image.width + "×" + image.height;

                }

            }

        }
        //调用:<img src="图片" onload="javascript:DrawImage(this)">

--------------css

.proleft{float:left;

    width: 630px;

    height: 360px;

    overflow: hidden;

    display: table-cell;

    text-align: center;

    vertical-align: middle;

         }

 .proleft span {

    display: inline-block;

    vertical-align: middle;

    height: 100%;

}

 .proleft img 

 {

    vertical-align: middle;

    max-width: 630px;

    max-height: 360px;

}

---------------html文本

<div class="proleft">

                <span></span>

                

                <img onload="javascript:DrawImage(this)" src="http://www.dajiatou.com/ufiles/thumbnail/201404191516401.jpg" width="426" height="251" alt="220×130">

            </div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: