CSS帮助设计师设置一个元素的最大宽度max-width和最大高度max-height，防止布局错位，我总是把img, iframe, 和 embed 标签设置成 max-width: 100% 这样在小屏幕的设备上依然可以浏览，不过我还是希望能够获取到图像没有被拉伸和缩小的原始尺寸。
The JavaScript
使用一些JavaScript的监听函数，我们可以得到的图像的实际尺寸：
| 代码如下 | 复制代码 |
|
myImage.addEventListener('onload', function() { console.log('My width is: ', this.naturalWidth); console.log('My height is: ', this.naturalHeight); }); |
|
我从来都没有听说过naturalWidth 和 naturalHeight不过获取到的值确实正确的，不过总是应该在网页加载完毕以后在获取图片的宽度，不然永远获取到的都是0。
网上发现一个定时检测图片宽高的方法，效率非常高。具体代码如下：
| 代码如下 | 复制代码 |
|
// 记录当前时间戳 var start_time = new Date().getTime(); // 图片地址 var img_url = ＇img/bdlogo.png?＇+start_time; // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 定时执行获取宽高 var check = function(){ // 只要任何一方大于0 // 表示已经服务器已经返回宽高 if(img.width>0 || img.height>0){ var diff = new Date().getTime() - start_time; document.body.innerHTML += ＇ from:check : width:＇+img.width+＇,height:＇+img.height+＇, time:＇+diff+＇ms ＇; clearInterval(set); } }; var set = setInterval(check,40); |
|
jquery方式
代码如下
| 代码如下 | 复制代码 |
| var _w = parseInt($(window).width());//获取浏览器的宽度 $(".new_mess_c img").each(function(i){ var img = $(this); var realWidth;//真实的宽度 var realHeight;//真实的高度 //这里做下说明，$("<img/>")这里是创建一个临时的img标签，类似js创建一个new Image()对象！ $("<img/>").attr("src", $(img).attr("src")).load(function() { /* 如果要获取图片的真实的宽度和高度有三点必须注意 1、需要创建一个image对象：如这里的$("<img/>") 2、指定图片的src路径 3、一定要在图片加载完成后执行如.load()函数里执行 */ realWidth = this.width; realHeight = this.height; //如果真实的宽度大于浏览器的宽度就按照100%显示 if(realWidth>=_w){ $(img).css("width","100%").css("height","auto"); } else{//如果小于浏览器的宽度按照原尺寸显示 $(img).css("width",realWidth+'px').css("height",realHeight+'px'); } }); }); |
|
时间： 2024-09-12 20:05:38