Как получить размеры фонового изображения в jQuery?

Вот перевод на русский язык в стиле ответа на StackOverflow.com.

Еще одна версия. Никакие манипуляции с DOM не нужны, все символы в имени файла изображения поддерживаются.

ОБНОВЛЕНИЕ Смотрите альтернативную версию ниже.

var image_url = $('#something').css('background-image'),
    image;

// Удаляем url() или в случае Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

if (image_url[1]) {
    image_url = image_url[1];
    image = new Image();

    // На случай, если изображение еще не загружено
    $(image).load(function () {
        alert(image.width + 'x' + image.height);
    });

    image.src = image_url;
}

Решение 2018 года

Этот ответ продолжает получать голоса через 5 лет. Я подумал, что стоит поделиться более полным решением. Это основано на исходном коде и оборачивает его в функцию. Оно использует объект jQuery Deferred, добавляет обработку ошибок и обновляет регулярное выражение, чтобы учесть 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 };
    });
};

//
// Использование
//
getBackgroundImageSize(jQuery('#mydiv'))
    .then(function(size) {
        console.log('Размер изображения:', size.width, size.height);
    })
    .fail(function() {
        console.log('Не удалось получить размер, так как не удалось загрузить изображение');
    });

Если у вас есть какие-либо вопросы или необходимо уточнение, не стесняйтесь спрашивать!

Поздний ответ, но вы можете сделать это следующим образом:

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

Таким образом, вам не нужно манипулировать дом-объектами.

Есть несколько способов решить эту задачу. Я постарался упростить код, и в итоге он сработал для меня:

var img = new Image();
img.src = $('#dom').css('background-image').replace("url(", "").replace(")", "").replace("\"", "").replace("\"", "");
$(img).on('load', function() {
    var bgImgWidth = img.width;
    var bgImgHeight = img.height;
    console.log("w::"+bgImgWidth+",h::"+bgImgHeight);
});

Этот код загружает изображение из фона элемента с id dom и выводит его ширину и высоту в консоль. Обратите внимание, что я использовал метод .on('load', ...) вместо .load(...), так как он более современный и рекомендуется к использованию.

Пожалуйста, убедитесь, что background-image действительно содержит правильный путь к изображению, и что элемент с id dom существует на странице.

Метод css('background-image') вернет строку в формате "url(...)", однако, так как это не DOM-объект, вы не сможете получить высоту изображения с его помощью. Чтобы получить размеры изображения, вам нужно извлечь URL из строки и создать новый элемент изображения в вашем документе, который позволит вам получить доступ к его свойствам, таким как ширина и высота. Вот пример, как это можно сделать:

var bgImage = $('.your-element').css('background-image');
var imageUrl = bgImage.replace(/url\(["']?/, '').replace(/["']?\)$/, '');

// Создаем новый объект изображения
var img = new Image();
img.onload = function() {
    // Здесь вы можете получить доступ к ширине и высоте загруженного изображения
    console.log('Width: ' + img.width);
    console.log('Height: ' + img.height);
};
img.src = imageUrl; // Устанавливаем URL изображения для загрузки

Этот подход позволит вам получить необходимые размеры изображения, используя его URL.

Ваша задача заключена в извлечении ширины и высоты изображения, загруженного в качестве фонового изображения элемента с заданным id. Вот комбинированное решение для этого:

var width,
    height;

$(image).on('load', function () {
    width  = this.width;
    height = this.height;
});

// Получаем URL фонового изображения из CSS
image.src = $('#id').css('background-image').replace(/url\(|\)$/ig, "").replace(/\"/g, "");

В этом коде мы используем метод .on('load'), который более современный и предпочтительный в jQuery для обработки события загрузки изображения. Также мы добавили замену лишних кавычек в URL изображения для большей надежности. Убедитесь, что ваш селектор #id правильный и соответствует элементу, у которого установлено фоновое изображение.