El problema es sencillo. ¿Cómo obtengo el tamaño de la 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.
Una versión más. No se necesita manipulación DOM, se admiten todos los caracteres en el nombre del archivo de imagen.
ACTUALIZAR 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; } Esta respuesta todavía recibe votos a favor 5 años después. Pensé que compartiré una solución más completa. Esto se basa en el código original y lo envuelve en una función. Utiliza jQuery Deferred Object, agrega manejo de errores y actualiza RegExp para que coincida con 3 casos posibles: 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'); });Tendrás que hacer algo como esto:
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);Debido a la simplicidad del código, no puede usar paréntesis ni 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.
Respuesta tardía, pero también podrías 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;