博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js将图片按比例缩放显示IE6
阅读量:6637 次
发布时间:2019-06-25

本文共 2376 字,大约阅读时间需要 7 分钟。

将图片按比例缩放显示在IE6下会失效,原因是在image未加载的的时候去获取Image的高度和宽度是获取不到的,所以可以判断若浏览器是IE6的话就在图片加载以后获取图片的高度和宽度然后再将图片进行比例缩放。具体实现代码如下:

//图片按比例缩放 @ImgID图片控件的ID,@iwidth指定的最大宽度,@iheight指定的最大高度
function DrawImage(ImgID, iwidth, iheight) {            var image = new Image();            image.src = $("#"+ImgID).attr("src");            if (window.ActiveXObject) {                var ua = navigator.userAgent.toLowerCase();                var ie = ua.match(/msie ([\d.]+)/)[1];                //判断是IE6                if (ie == 6.0) {                    image.onreadystatechange = function() {                        if (image.readyState == "complete") {                            ShowImg(image, iwidth, iheight,ImgID);                        }                    }                }                else {                    ShowImg(image, iwidth, iheight,ImgID);                }            }        }        function ShowImg(image, iwidth, iheight,ImgID) {            var widths = image.width;            var heights = image.height;            var newHeight, newWidth;            if (widths > 0 && heights > 0) {                if (widths / heights >= iwidth / iheight) {                    if (widths > iwidth) {                        newWidth = iwidth;                        newHeight = (heights * iwidth) / widths;                    } else {                        newWidth = iwidth;                        newHeight = (heights * iwidth) / widths;                    }                }                else {                    if (heights > iheight) {                        newHeight = iheight;                        newWidth = (widths * iheight) / heights;                    } else {                        newHeight = iheight;                        newWidth = (widths * iheight) / heights;                    }                }            }            $("#"+ImgID).css("height", newHeight);            $("#"+ImgID).css("width", newWidth);       //以下三行代码是将图片设置在其外的div的水平居中和垂直居中显示,此处DIV的宽度和高度均为325px var newWidth = parseInt($("#"+ImgID).css("width"));            var lefts = parseInt((325 - newWidth) / 2), tops = parseInt((325 - newHeight) / 2);            $("#"+ImgID).css("margin-left", lefts + "px").css("margin-top", tops + "px");        }

这样在各种IE下都没有问题了。 

PS:我的淘宝店铺新开业,经营各种桌游,棋牌,希望大伙儿能来看看!http://201314yes.taobao.com/

转载于:https://www.cnblogs.com/jenney-qiu/archive/2012/05/16/2503971.html

你可能感兴趣的文章
django基础知识 ~ choice
查看>>
2012 Multi-University #10
查看>>
暴力 ZOJ 1403 Safecracker
查看>>
python列表的深浅复制
查看>>
对于联通块的处理
查看>>
动态规划——Best Time to Buy and Sell Stock IV
查看>>
Linq GroupBy
查看>>
读《世界是数字的》有感②
查看>>
导出导入数据库
查看>>
Node.js- sublime搭建node的编译环境
查看>>
个人代码库の自动粘合桌面边缘
查看>>
lunix下设这mysql的默认编码是Utf8
查看>>
洛谷 P1008 三连击 Label:水
查看>>
静态,抽象类、接口、类库
查看>>
Linux基础之快照克隆、Xshell优化、Linux历史
查看>>
c++并发详解很好的链接
查看>>
[K/3Cloud] 动态表单打开时传递一个自定义参数并在插件中获取
查看>>
如何通过插件携带第二个单据体到下游单据
查看>>
对几个Xaml控件的一些看法
查看>>
How to configration Jreble for hybris in eclipse
查看>>