Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.05.2024, 21:12
Интересующийся
Отправить личное сообщение для Uthvfy62 Посмотреть профиль Найти все сообщения от Uthvfy62
 
Регистрация: 09.05.2024
Сообщений: 22

вычислить ширину высоту блока
Как можно на js получить высоту и ширину фонового изображения? Если background-size: 40px 60px У блока width: 50px height: 70px. Как можно подстроить высоту и длинну блока под размеры бэкграунда? Чтоб у блока длинна и высота тоже стала 40px и 60px.

Последний раз редактировалось Uthvfy62, 10.05.2024 в 11:14.
Ответить с цитированием
  #2 (permalink)  
Старый 11.05.2024, 11:54
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,589

Дуратская и бессмысленная задача:
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. ???
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
стрелки вниз, верх при раздвижение блоков dima018 Элементы интерфейса 8 12.02.2018 21:29
Изменить высоту фрейма в зависимости от высоты блока в загружаемом документе Sigizmund2012 Элементы интерфейса 18 09.12.2014 18:07
Изменить высоту блока в зависимости от дочернего juliababouk Общие вопросы Javascript 6 14.10.2014 12:00
Как узнать максимальную высоту блока? frost18 Элементы интерфейса 11 22.10.2013 04:07
Вычислить реальную ширину элемента без его отрисовки archytector Элементы интерфейса 7 12.01.2011 09:26