вычислить ширину высоту блока
Как можно на js получить высоту и ширину фонового изображения? Если background-size: 40px 60px У блока width: 50px height: 70px. Как можно подстроить высоту и длинну блока под размеры бэкграунда? Чтоб у блока длинна и высота тоже стала 40px и 60px.
|
Дуратская и бессмысленная задача:
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. ??? |
Часовой пояс GMT +3, время: 15:52. |