前言

若依(ruoyi)： v4.3
360极速浏览器 12.0.1550.0 (正式版本) （32 位）
操作系统 Windows 10 OS Version 2004 (Build 19041.572)
JavaScript V8 7.8.279.23
jQuery v2.1.4

表格图片预览功能

若依(ruoyi)自带了一个表格图片预览功能。该功能可以在示例演示>表格>表格图片预览功能中找到。

表格图片预览功能图片超宽问题

表格图片预览功能遇到超宽图片（比如屏幕宽度1024px，图片宽度为1800px）时，图片会将弹出层撑宽至与图片同宽（只有设定图片宽度是auto时，才会出现此问题）。这时，将无法看到关闭按钮，也就无法关闭图片预览功能。

表格图片预览功能图片超宽时，改为指定图片宽度

表格图片预览功能图片超宽时，将图片宽度指定一个小于当前窗口的宽度值，这样就可以看到关闭按钮，或者看到部分留白（点击留白部分也可以关闭图片预览）。

找到ry-ui.js，在其中找到下面部分的代码：

// 图片预览事件
$(optionsIds).off("click").on("click", '.img-circle', function() {var src = $(this).attr('src');var target = $(this).data('target');if($.common.equals("self", target)) {var height = $(this).data('height');var width = $(this).data('width');// 如果是移动端，就使用自适应大小弹窗if ($.common.isMobile()) {width = 'auto';height = 'auto';}layer.open({id: "div_img",title: false,type: 1,closeBtn: true,shadeClose: true,area: ['auto', 'auto'],content: "<img src='" + src + "' height='" + height + "' width='" + width + "'/>",});} else if ($.common.equals("blank", target)) {window.open(src);}
});

在上面的代码中添加success回调函数，添加后代码如下：

// 图片预览事件
$(optionsIds).off("click").on("click", '.img-circle', function() {var src = $(this).attr('src');var target = $(this).data('target')||"self";if($.common.equals("self", target)) {var height = $(this).data('height')||"auto";var width = $(this).data('width')||"auto";// 如果是移动端，就使用自适应大小弹窗if ($.common.isMobile()) {width = 'auto';height = 'auto';}layer.open({id: "div_img", /* 给个固定的ID，方便后面查找元素 */title: false,type: 1,closeBtn: true, /* 关闭按钮 */shadeClose: true, /* 点击阴影区域关闭弹窗 */area: ['auto', 'auto'],content: "<img src='" + src + "' height='" + height + "' width='" + width + "'/>",success: function(layero, index){// 图片加载完成后，再次处理图片宽度$('#div_img > img', layero).load(function(){// 获取图片宽和高let imgElement = $('#div_img > img', layero);let imgWidth = imgElement.width();let imgHeight = imgElement.height();// 获取 mainContent 宽和高。若依中，多数情况下页面嵌套页面。             let mainContent = $('#content-main', window.parent.document);if (mainContent.length<=0) {/* 修正mainContent：如果在新窗口中打开链接时，没有父级窗口 */mainContent = $(window);}let mainContentWidth = mainContent.width();let mainContentHeight = mainContent.height();/* 计算图片的宽度 */let newImgWidth = imgWidth;/* 图片超宽时，将图片的宽度设置为当前窗口的95%。图片高度auto */if (imgWidth > mainContentWidth*0.95) {newImgWidth = mainContentWidth*0.95;}/* 图片超高时，计算一个让图片不超高的宽度。图片高度auto */if (imgHeight > mainContentHeight*0.95) {let tmpNewImgWidth = imgWidth*(mainContentHeight*0.95/imgHeight);if (newImgWidth > tmpNewImgWidth) {newImgWidth = tmpNewImgWidth;}}// 重设图片的宽和高// 图片容器的高度设置为auto，不设置时，该容器的高度为固定值$("#div_img", layero).height('auto');// 指定图片的宽度$("#div_img > img", layero).attr({width: newImgWidth });// 很重要。触发窗口的 resize 事件，让 layer 调整位置。$(window).resize();});}});} else if ($.common.equals("blank", target)) {window.open(src);}
});

参考

https://www.w3school.com.cn/jquery/event_resize.asp
https://www.cnblogs.com/ymy124/p/4538695.html
https://www.w3school.com.cn/jquery/attributes_attr.asp
https://www.w3school.com.cn/jquery/css_height.asp
https://www.w3school.com.cn/jquery/css_width.asp

【若依(ruoyi)】表格图片预览功能图片超宽、超高问题相关推荐

vue+vant使用图片预览功能ImagePreview的问题
如果您搜到这篇文章的话,那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图: 着实让员外百思不 ...
原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
html预览图片的功能,javascript实现的图片预览功能
本文实例讲述了javascript实现的图片预览功能.分享给大家供大家参考,具体如下: 1.将下面的代码复制到内 /* Thumbnail image viewer- ?Dynamic Drive ...
微信小程序实现图片预览功能
小程序有提供预览图片的wx.previewImage方法先在页面上放上图片标签 <imagecatch:tap="preview"data-src = 'https://s ...
vue图片缩略图及图片预览功能
前言上次有个需求,是要给图片做个缩略图以及预览功能.其实用vue来实现是很简单的, 几句代码可以搞定,也不需要什么额外的插件. 效果如下: vue显示图片缩略图 vue显示图片预览功能核心代码两 ...
django admin后台列表页、修改/详情页图片预览功能
目录一.admin后台列表页的图片预览功能二.admin后台修改/详情页图片预览功能 1,添加html前端代码 2.在admin.py文件中添加以下代码: 1.列表页图片问题:在admin列表页中 ...
最简单的图片预览功能【兼容IE8】
最简单的图片预览功能[兼容IE8] 将如下代码放入<head></head>中: <html><head> <script type=&quo ...
带图片预览功能的图片上传
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
图片预览与图片通过预留接口上传
提示:图片预览与图片通过预留接口上传的笔记图片前端预览: 前提:通过input[type=file]让用户选择文件,通过事件对象.target.files拿到用户选择的"文件对象" ...

【若依(ruoyi)】表格图片预览功能图片超宽、超高问题

前言

表格图片预览功能

表格图片预览功能图片超宽问题

表格图片预览功能图片超宽时，改为指定图片宽度

参考

【若依(ruoyi)】表格图片预览功能图片超宽、超高问题相关推荐

最新文章

热门文章