¿Cómo obtengo el tamaño de la imagen de fondo en jQuery?

El problema es simple ¿Cómo obtengo el tamaño de imagen de fondo de un div (ancho y alto) en jQuery? ¿Es posible? Pensé que esto funcionaría:

jQuery('#myDiv').css('background-image').height(); 

El mensaje de error que recibo es que esto no es una función.

Tendrás que hacer algo como esto:

 var url = $('#myDiv').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', ''); var bgImg = $(''); bgImg.hide(); bgImg.bind('load', function() { var height = $(this).height(); alert(height); }); $('#myDiv').append(bgImg); bgImg.attr('src', url); 

Debido a la simplicidad del código, no puede usar paréntesis o comillas en las URL de sus imágenes de fondo. Sin embargo, el código podría extenderse para un mayor soporte. Solo quería transmitir la idea general.

Una versión más. No se necesita manipulación DOM, todos los caracteres en el nombre del archivo de imagen son compatibles.

ACTUALIZACIÓN Vea una versión alternativa a continuación.

 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; } 

Solución 2018

Esta respuesta todavía recibe votos favorables 5 años después. Pensé que compartiría una solución más completa. Esto se basa en el código original y lo envuelve en una función. Utiliza jQuery Objeto diferido, agrega manejo de errores y actualiza RegExp para que coincida con 3 posibles casos: url() , url("") y url('') . También funciona en jQuery 1 a 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'); }); 

Respuesta tardía, pero también podría hacer esto:

 var img = new Image; img.src = $('#myDiv').css('background-image').replace(/url\(|\)$/ig, ""); var bgImgWidth = img.width; var bgImgHeight = img.height; 

Entonces no tienes que manipular los objetos Dom;

Otra forma corta:

 function bgSize($el, cb){ $('') .load(function(){ cb(this.width, this.height); }) .attr('src', $el.css('background-image').match(/^url\("?(.+?)"?\)$/)[1]); } 

uso

 bgSize($('#element-with-background'), function(width, height){ console.log('width : ' + width + ' height : ' + height); }); 

https://jsfiddle.net/x4u2ndha/58/

Combiné la respuesta de John junto con el estilo de complemento de Stryder. Este plugin espera que la imagen se cargue:

 $.fn.getBgImage = function(callback) { var height = 0; var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', ''); var tempImg = $(''); tempImg.hide(); //hide image tempImg.bind('load', callback); $('body').append(tempImg); // add to DOM before  tempImg.attr('src', path); $('#tempImg').remove(); //remove from DOM }; // usage $("#background").getBgImage(function() { console.log($(this).height()); }); 

no dude en extender este código: https://gist.github.com/1276118

Hice lo mismo para el ancho 🙂

 $.fn.getBgWidth = function () { var width = 0; var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', ''); var tempImg = ''; $('body').append(tempImg); // add to DOM before  $('#tempImg').hide(); //hide image width = $('#tempImg').width(); //get width $('#tempImg').remove(); //remove from DOM return width; }; 

Ha pasado un tiempo, pero también necesitaba esta solución, basada en algunas soluciones sugeridas, esta es mi solución completa.

 $.fn.getBgHeight = function () { var height = 0; var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', ''); var tempImg = ''; $('body').append(tempImg); // add to DOM before  $('#tempImg').hide(); //hide image height = $('#tempImg').height(); //get height $('#tempImg').remove(); //remove from DOM return height; }; 

css (‘background-image’) devolverá “url (…..)”, no puede probar la altura de la imagen con eso, ya que no es un objeto DOM.

lo mismo que arriba, pero usando regexp en lugar de 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 = $(''); $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(); }); 

La siguiente es mi adaptación:

 $.fn.getBgDim = function (callback) { var width = 0, height = 0, path = $(this).css("background-image").replace("url(", "").replace(")", "").replace("\"", "").replace("\"", ""), tmp = $(""); 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); }; 

Uso:

 $("#image").getBgDim(function(dim) { console.log("Height: " + dim.height + " Width: " + dim.width); }); 

Tal vez hay pocas posibilidades, he tratado de simplificar tanto y finalmente esto funciona para mí

 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) ; }) ; 

Aquí está mi versión.

 $.fn.getBgImage = function (callback) { var path = $(this).css('background-image').match(/^url\("?(.+?)"?\)$/)[1]; var tempImg = $('').hide().bind('load', function () { callback($(this).width(), $(this).height()); $(this).remove(); }).appendTo('body').attr('src', path); }; 

Uso:

 imgDiv.getBgImage(function (imgW, imgH) { //use the imgW and imgH here! }); 

Versión combinada de las soluciones anteriores

 var width, height; $(image).load(function () { width = image.width; height = image.height; }); image.src = $('#id').css('background-image').replace(/url\(|\)$/ig, ""); 

En el caso de que su css tuviera comillas dobles o manipulación del navegador haga lo siguiente.

 var url = $('#myDiv').css('background-image').replace('url(','').replace(')','').replace('"','').replace('"',''); var bgImg = $(''); bgImg.hide(); bgImg.bind('load', function() { var height = $(this).height(); alert(height); }); $('#myDiv').append(bgImg); bgImg.attr('src', url);