Дуратская и бессмысленная задача:
1. обычно картинки подгоняют под размер, а не наоборот;
2. если картинки статические - статически же припиши и размеры(которые ты заранее знаешь), это ускоряет загрузку и убирает лишние "скачки" и отрисовки;
3. если картинки рандомные - то скорее всего это именно картинки, а не элементы дизайна, а значит семантически они и должны быть картинками.(что всё равно не мешает прописать им размеры на сервере, см. п.2)
Но вот тебе какашка, которую ты хочешь:
async function setSizeAsBackground(element) {
const url = /url\s*\(\s*(['"])?(.*)?\1\s*\)/.exec(
getComputedStyle(element).backgroundImage
)?.[2];
if (!url) return false;
const img = new Image();
img.src = url;
try {
await img.decode();
} catch(e) {
return false
}
element.style.width = `${img.naturalWidth}px`;
element.style.height = `${img.naturalHeight}px`;
return true;
}
setSizeAsBackground(element);
Она будет работать только если:
0. background - это картинка
1. нет множественных background
2. нет background-position
3. нет background-size
4. ???