图片浏览 h5

@{
    Layout = null;
}

<html>
<head>
    <script type="text/javascript" src="~/scripts/jquery-1.10.2.min.js"></script>
    <meta name="viewport" content="width=device-width,height=device-height, minimum-scale=0.1">
    <style>
        img {
            text-align: center;
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .overflowingVertical {
            cursor: zoom-out;
        }

        .shrinkToFit {
            cursor: zoom-in;
        }

        body {
            background-color: #272525;
            color: #eee;
            margin: 0;
        }
    </style>
</head>
<body>
    <img src="@ViewBag.PicURL" alt="@ViewBag.PicURL" onload="initImg();" />
    <script>
        function initImg() {
            drawImage($("img"), document.body.clientWidth, document.body.clientHeight);
        }
        function drawImage(ImgD, FitWidth, FitHeight) {
            var image = new Image();
            image.src = ImgD.attr("src");
            if (image.width > 0 && image.height > 0) {
                if (image.width / image.height >= FitWidth / FitHeight) {
                    if (image.width > FitWidth) {
                        ImgD.css("width", FitWidth);
                        ImgD.css("height", (image.height * FitWidth) / image.width);
                        $("img").attr("class", "shrinkToFit");
                        ImgD.css("margin-top", 0);
                    } else {
                        ImgD.css("width", image.width);
                        ImgD.css("height", image.height);
                    }
                } else {
                    if (image.height > FitHeight) {
                        ImgD.css("height", FitHeight);
                        ImgD.css("width", (image.width * FitHeight) / image.height);
                        $("img").attr("class", "shrinkToFit");
                        ImgD.css("margin-top", 0);

                    } else {
                        ImgD.css("width", image.width);
                        ImgD.css("height", image.height);
                    }
                }
            }
        }
        $("img").mousedown(function () {
            if (typeof $(this).attr("class") != "undefined") {
                $(this).toggleClass("shrinkToFit overflowingVertical");
                if ($(this).hasClass("overflowingVertical")) {
                    var img = new Image();
                    img.src = $(this).attr("src");
                    var imgWidth = img.width; //图片实际宽度
                    var imgHeight = img.height; //图片实际高度
                    drawImage($(this), imgWidth, imgHeight);
                }
                if ($(this).hasClass("shrinkToFit")) {
                    drawImage($("img"), document.body.clientWidth, document.body.clientHeight);
                }
            }
        });
    </script>
</body>
</html>

后台：

/// <summary>
        /// 图片自适应居中打开，非图片浏览器下载
        /// </summary>
        /// <param name="dirRelativePath">文件路径，包含文件名</param>
        /// <param name="fileName">文件名</param>
        /// <returns></returns>
        public ActionResult OpenPicture(string dirRelativePath, string fileName)
        {
            Regex regex = new Regex(@".jpg|.bmp|.png|.gif|.tiff");
            fileName = fileName.ToLower();
            var isMatch = regex.IsMatch(fileName);
            //图片
            if (isMatch)
            {
                ViewBag.PicURL = "/Home/DownLoad?dirRelativePath=" + dirRelativePath + "&fileName=" + fileName;
            }
            else
            {
                return RedirectToAction("DownLoad", "Home", new { dirRelativePath = dirRelativePath, fileName = fileName });
            }
            return View();
        }
        /// <summary>
        /// 下载附件
        /// </summary>
        /// <param name="dirRelativePath"></param>
        /// <param name="fileName"></param>
        /// <returns></returns>
        public ActionResult DownLoad(string dirRelativePath, string fileName)
        {

            string uploadPath = System.Configuration.ConfigurationManager.AppSettings["BPMAttachments"];
            string dirAbsolutePath = uploadPath + dirRelativePath;

            if (!System.IO.File.Exists(dirAbsolutePath))
            {
                return Content("提示：文件在磁盘上不存在");
            }
            //HttpContext.Response.AddHeader("content-disposition", "attachment;filename=" + fileName);
            //return File(dirAbsolutePath, "application/octet-stream");
            var contentType = MimeMapping.GetMimeMapping(fileName);
            HttpContext.Response.AddHeader("content-disposition", "inline;filename=" + fileName);
            return File(dirAbsolutePath, contentType);
        }

相关阅读:
ActiveReports 报表应用教程 (9)---交互式报表之动态排序
 struts2-结果处理方式
 struts2-action的创建方式
 struts2-动态方调用
 struts2-常量配置
 struts2架构图
 maven依赖范围-Scope
Maven在eclipse的使用入门
 Maven简介
 数组的学习与使用
原文地址：https://www.cnblogs.com/xuguanghui/p/5973608.html