问题很简单。如何在jQuery中获取div的背景图像大小（宽度和高度）。它甚至可能吗？我认为这样可行：
jQuery('#myDiv').css('background-image').height();
我得到的错误信息是这不是一个函数。
答案 0 :(得分：85)
还有一个版本。无需DOM操作，支持图像文件名中的所有字符。
更新请参阅下面的替代版本。
var image_url = $('#something').css('background-image'),
image;
// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);
if (image_url[1]) {
image_url = image_url[1];
image = new Image();
// just in case it is not already loaded
$(image).load(function () {
alert(image.width + 'x' + image.height);
});
image.src = image_url;
}
这个答案在5年之后仍然得到了回报。我想我会分享一个更完整的解决方案。它构建于原始代码之上，并将其包装到函数中。它使用jQuery Deferred Object，添加错误处理并更新RegExp以匹配3种可能的情况：url()，url("")和url('')。它也适用于jQuery 1到3。
var getBackgroundImageSize = function(el) {
var imageUrl = $(el).css('background-image').match(/^url\(["']?(.+?)["']?\)$/);
var dfd = new $.Deferred();
if (imageUrl) {
var image = new Image();
image.onload = dfd.resolve;
image.onerror = dfd.reject;
image.src = imageUrl[1];
} else {
dfd.reject();
}
return dfd.then(function() {
return { width: this.width, height: this.height };
});
};
//
// Usage
//
getBackgroundImageSize(jQuery('#mydiv'))
.then(function(size) {
console.log('Image size is', size.width, size.height);
})
.fail(function() {
console.log('Could not get size because could not load image');
});
答案 1 :(得分：33)
你必须做这样的事情：
var url = $('#myDiv').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
var bgImg = $('<img />');
bgImg.hide();
bgImg.bind('load', function()
{
var height = $(this).height();
alert(height);
});
$('#myDiv').append(bgImg);
bgImg.attr('src', url);
由于代码简单，您不能在背景图像的URL中使用括号或引号。但是，可以扩展代码以获得更大的支持。我只是想传达一般的想法。
答案 2 :(得分：26)
迟到的答案，但你也可以这样做：
var img = new Image;
img.src = $('#myDiv').css('background-image').replace(/url\(|\)$/ig, "");
var bgImgWidth = img.width;
var bgImgHeight = img.height;
然后你不必操纵dom对象;
答案 3 :(得分：4)
另一个简短的方法：
function bgSize($el, cb){
$('<img />')
.load(function(){ cb(this.width, this.height); })
.attr('src', $el.css('background-image').match(/^url\("?(.+?)"?\)$/)[1]);
}
使用
bgSize($('#element-with-background'), function(width, height){
console.log('width : ' + width + ' height : ' + height);
});
答案 4 :(得分：3)
我将John的答案和Stryder的插件样式合并在一起。此插件等待加载图像：
$.fn.getBgImage = function(callback) {
var height = 0;
var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
var tempImg = $('<img />');
tempImg.hide(); //hide image
tempImg.bind('load', callback);
$('body').append(tempImg); // add to DOM before </body>
tempImg.attr('src', path);
$('#tempImg').remove(); //remove from DOM
};
// usage
$("#background").getBgImage(function() {
console.log($(this).height());
});
随时扩展此代码：https://gist.github.com/1276118
答案 5 :(得分：2)
已经有一段时间了，但我也需要这个解决方案，基于一些建议的解决方案，这是我的完整解决方案。
$.fn.getBgHeight = function () {
var height = 0;
var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
var tempImg = '<img id="tempImg" src="' + path + '"/>';
$('body').append(tempImg); // add to DOM before </body>
$('#tempImg').hide(); //hide image
height = $('#tempImg').height(); //get height
$('#tempImg').remove(); //remove from DOM
return height;
};
答案 6 :(得分：2)
我为宽度做了同样的事情：）
$.fn.getBgWidth = function () {
var width = 0;
var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
var tempImg = '<img id="tempImg" src="' + path + '"/>';
$('body').append(tempImg); // add to DOM before </body>
$('#tempImg').hide(); //hide image
width = $('#tempImg').width(); //get width
$('#tempImg').remove(); //remove from DOM
return width;
};
答案 7 :(得分：1)
与上面相同，但使用regexp而不是replace（）
$.fn.extend({
/**
* gets background image
* @param callback function (inside - this = HTMLElement image)
*/
get_bg_image: function(callback) {
if (typeof callback != 'function') return;
var regexp = /url\((.+)\)/i,
regexp2 = /["']/gi,
res = regexp.exec($(this).css('background-image')),
img_src = res[1].replace(regexp2, ''),
$tempImg = $('<img />');
$tempImg.hide();
$tempImg.bind('load', function(e) {
callback.call(this, e);
$tempImg.remove();
});
$('body').append($tempImg);
$tempImg.attr('src', img_src);
}
});
// usage
$('div').get_bg_image(function() {
var bg_img_width = $(this).width();
});
答案 8 :(得分：1)
css（'background-image'）将返回“url（.....）”，你不能用它来测试图像的高度，因为它不是DOM对象。
答案 9 :(得分：1)
以下是我的改编：
$.fn.getBgDim = function (callback) {
var width = 0,
height = 0,
path = $(this).css("background-image").replace("url(", "").replace(")", "").replace("\"", "").replace("\"", ""),
tmp = $("<img />");
tmp.hide();
tmp.bind("load", function() {
width = $(this).width();
height = $(this).height();
callback({"width": width, "height": height});
$(this).remove();
});
$("body").append(tmp);
tmp.attr('src', path);
};
用法：
$("#image").getBgDim(function(dim) {
console.log("Height: " + dim.height + " Width: " + dim.width);
});
答案 10 :(得分：1)
也许很少有可能，我已尽力简化，最终这对我有用
var img = new Image ;
img.src = $('#dom').css('background-image').replace("url(", "").replace(")", "").replace("\"", "").replace("\"", "");
$(img).load(function() {
var bgImgWidth = img.width;
var bgImgHeight = img.height;
console.log("w::"+bgImgWidth+",h::"+bgImgHeight) ;
}) ;
答案 11 :(得分：1)
这是我的演绎。
$.fn.getBgImage = function (callback) {
var path = $(this).css('background-image').match(/^url\("?(.+?)"?\)$/)[1];
var tempImg = $('<img />').hide().bind('load', function () {
callback($(this).width(), $(this).height());
$(this).remove();
}).appendTo('body').attr('src', path);
};
用法：
imgDiv.getBgImage(function (imgW, imgH) {
//use the imgW and imgH here!
});
答案 12 :(得分：0)
这是关于此主题的最受欢迎的问题，因此我不得不说我不理解为什么人们试图使事情变得过于复杂。我还必须承认，我不知道如何仅通过一个参数since the method takes 3 parameters调用COPY ... FROM STDIN JQuery函数。据我所知，这将导致load()异常。我不知道我是否错过了这些东西，或者这些年来API发生了很大变化。无论如何，这是截至2020年的可行解决方案：
'IndexOf()' is not defined致电：
jQuery.fn.extend({
backgroundImageSizeAsync: async function() {
const imageUrl = this.css("background-image").match(/^url\("?(.+?)"?\)$/)[1];
const image = new Image();
await $.Deferred(function (task) {
image.onload = () => task.resolve(image);
image.onerror = () => task.reject();
image.src = imageUrl;
}).promise();
return {
width: image.width,
height: image.height
}
},
});
答案 13 :(得分：0)
在我的特定情况下，我需要可以与background-image: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(...)一起使用的功能。我还需要一个代码，该代码将能够检查特定类中的多个图像，而无需复制每个图像的代码。
也许对某人有用！ （我绝对不是Jquery专家，因为我一个月前开始为个人网站编写代码。因此，如有需要，请随时进行纠正！）
该作品也是最新的jQuery 3和IE11。为了实现向后的JQuery兼容性，我认为您只能将.on("load", function()替换为.load(function()。
//will check all div with this class or id
var $image = $('#myDiv');
//will extract url only by splitting property on comas (takes care of comas on rgba(x, x, x, x))
var imageUrl = $image.css('background-image').split(",")[8].replace('url(','').replace(')','').replace('"','').replace('"','');
var img = new Image ;
img.src = imageUrl;
$(img).on("load", function() {
var image_width = img.width;
var image_height = img.height;
console.log(image_width + " x " + image_height) ;
}) ;
答案 14 :(得分：0)
// The above all solutions may work in all browsers except IE11 so below is the modified solution for IE11 browser
//The height calculated for IE11 wasn't correct as per above code
$.fn.getBgImage = function(callback) {
if (typeof callback != 'function') return;
var regexp = /url\((.+)\)/i,
regexp2 = /["']/gi,
res = regexp.exec($(this).css('background-image')),
img_src = res[1].replace(regexp2, ''),
$tempImg = $('<img />');
$tempImg.hide();
$tempImg.bind('load', function(e) {
callback.call(this, e);
$tempImg.remove();
});
$('body').css({ 'width': 100 + '%' });
$tempImg.css({ 'width': 100 + '%' });
$('body').append($tempImg);
$tempImg.attr('src', img_src);
}
答案 15 :(得分：0)
如果你的css有双引号或浏览器操作，请执行以下操作。
var url = $('#myDiv').css('background-image').replace('url(','').replace(')','').replace('"','').replace('"','');
var bgImg = $('<img />');
bgImg.hide();
bgImg.bind('load', function()
{
var height = $(this).height();
alert(height);
});
$('#myDiv').append(bgImg);
bgImg.attr('src', url);
答案 16 :(得分：0)
上述解决方案的组合版本
var width,
height;
$(image).load(function () {
width = image.width;
height = image.height;
});
image.src = $('#id').css('background-image').replace(/url\(|\)$/ig, "");