动态计算图片宽高适配

最新推荐文章于 2023-02-02 16:18:13 发布

dingmi4238

最新推荐文章于 2023-02-02 16:18:13 发布

阅读量255

点赞数

原文链接：http://www.cnblogs.com/Black-Skin/p/9197476.html

版权

前几天接了个需求，要求把扫描的影像展示出来，由于客户的纸张文件·大小不固定，而产品又要求图片不能失真，因此自己捣鼓了个小方法代码如下：

function adaptImg(el, maxHeight) { //el 是图片的id  
            var textId = document.getElementById(el),
                computedWidth = textId.clientWidth, //初始设置的宽度
                height = textId.naturalHeight, //只支持ie9+
                width = textId.naturalWidth,
                imgScale = (width / height).toFixed(2); //图片的宽高比
            if (computedWidth / imgScale > maxHeight) { //如果图片的宽度100% 计算出的高度大于最大值 则以高度适配 
                textId.style.width = maxHeight * imgScale + "px"; //图片的高度设置为最大值 计算宽度
            }
        }