使用jQuery从背景图像获取尺寸

我正在将背景图像加载到div中。是否有可能从这个图像中获取尺寸？使用jQuery从背景图像获取尺寸

我试图做一个功能，将取代文字与飞行中的图像，在菜单中使用。

$.fn.MenuImages = function() { 
    return this.each(function(i) { 
    var name = $(this).find('a').attr('title'); 
    $(this).css("background-image","url(images/menu-"+name+"-h.png)"); 
    }); 
};

问题是图像并不都具有相同的大小。我不知道如何读取文件的尺寸，除非我将它加载到隐藏的div或其他东西中，但听起来很脏。任何建议？谢谢！

修正：

$.fn.MenuImages = function() { 
return this.each(function(i) { 
    var link = $(this).find('a'); 
    var name = link.attr('title'); 
    link.html("<img src='images/menu-"+name+"-h.png' />"); 
});

};

来源

2010-07-22 Maurice Kroon

你为什么使用背景图片？你能提供一个URL，我们可以看到你正在尝试什么？ – Lazarus 2010-07-22 13:58:26

不幸的是，您无法从CSS背景属性中获取图片的尺寸。我认为你的肮脏解决方案是唯一的方法。 – Pat 2010-07-22 14:00:57

拉撒路，你说得很对。哈哈，没有想到这一点。这就是它，不需要css检查。 – 2010-07-22 14:08:14

$('<img src='images/menu-"+name+"-h.png' />').attr('src',function(){ 
    return $('body').css('background-image'); 
}).load(function(){ 
    w = $(this).width(); 
    h = $(this).height(); 
});

这等到图像加载抓住高度和d宽度。

来源

2010-07-22 14:38:36 Mark

我试过这个，但是$（this）.width（）总是返回0. – 2013-12-28 01:23:27

但是this.naturalWidth返回正确的值。 – 2013-12-28 01:35:50

var img=new Image(); 
img.onload=function(){ 
    alert(img.width); 
    alert(img.height); 
}; 
img.src="image.png";

来源

2010-07-22 13:59:19 Maz

Jquery的

w = $("img").width(); 
h = $("img").height();

红宝石

IO.read('image.png')[0x10..0x18].unpack('NN')

这产生的阵列[宽度，高度]，使用时可以提取为宽度等[0] ...

来源

2010-07-22 14:02:59 nicholasklick

使用jQuery从背景图像获取尺寸

回答

相关问题