layui图片自适应大小预览

最近使用layui做了一个系统，用到了图片预览的功能，功能需求是根据图片大小自适应缩放展示，通俗的来讲就是图片展示框大小恒定，图片根据展示框大小自动缩小或放大。

实现思路：只需要先计算window的宽高，然后获取图片的宽高，然后按比例计算图片的显示宽高即可。

实现代码(JS)：

function previewImg(config) {

            if (!config.src || config.src == "") {
                layer.msg("没有发现图片！");
                return;
            }
            var default_config = { title: "抓拍图片预览丨" + config.equipmentName + "丨抓拍编号：" + config.capturedTime };
            var img = new Image();
            img.onload = function () {//避免图片还未加载完成无法获取到图片的大小。
                //避免图片太大，导致弹出展示超出了网页显示访问，所以图片大于浏览器时下窗口可视区域时，进行等比例缩小。
                var max_height = $(window).height() - 100;
                var max_width = $(window).width();
                //rate1，rate2，rate3 三个比例中取最小的。
                var rate1 = max_height / img.height;
                var rate2 = max_width / img.width;
                var rate3 = 1;
                var rate = Math.min(rate1, rate2, rate3);
                //等比例缩放
                default_config.height = img.height * rate; //获取图片高度
                default_config.width = img.width * rate; //获取图片宽度

                $.extend(default_config, config);
                var imgHtml = "<img src='" + default_config.src + "' width='" + default_config.width + "px' height='" + default_config.height + "px'/>";
                //弹出层
                layer.open({
                    type: 1,
                    shade: 0.8,
                    offset: 'auto',
                    area: [default_config.width + 'px', default_config.height + 50 + 'px'],
                    shadeClose: true,
                    scrollbar: false,
                    title: default_config.title, //不显示标题
                    content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                    cancel: function () {
                        //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                    }
                });
            }
            img.src = config.src;
        }

调用方法：

         var o = new Object();
         o.src = "http://abc.com/123456.jpg";
         o.capturedTime = data.SerialNumber;
         o.equipmentName = data.EquipmentName;
         previewImg(o)

实现效果：