Можно ли получить высоту/ширину у background с background-size: cover?

Question

[Dubrovin]

Здравствуйте,
у блока DIV установлено фоновое изображение через background-image: url() и размер изображения через background-size: cover.
Возможно ли через JS получить высоту/ширину отрендеренного фонового изображения в пикселях?

Answer 1

[londhor]

Сложно, но можно:

1. Получи начальное значение самой картинки в px (условно 1920х1080 px)
2. Получи размер div, в котором картинка (допустим 1440x900px).

В нашем случае размер BG будет высчитываться от высоты картинки и высоты блока.
Соответственно 1080/900 = 1.2. где 1.2, это соотношение, на которое уменьшена твоя картинка.

Теперь, зная соотношение, узнаем ширину. Для этого, делим ширину картинки на соотношение (1920/1.2) и получаем 1600 px.

Итог: размер бекграунда 1600x900px.

Случаи, где картинка или блок вертикальные думаю сможешь доработать сам, по аналогии с примером выше. Главное, это определить от чего базируется размер картинки в блоке. Думаю на моем примере сможешь без труда дописать необходимый функционал

Comments

[Dubrovin]

Да, до этого я, конечно же дошёл, просто думал, что есть решение более нативное. Спасибо!

Answer 2

[Lord_Dantes]

Можно ли получить высоту/ширину у background с background-size: cover?

Фактически да. Но это будет ширина и высота равна контенту или заранее установленным правилам width и height.

По факту не возможно потому-что картинка сама не растянется к нужным ей размерам ибо это background.

Comments

[Dubrovin]

Если честно, ничего не понял из вашего ответа :)
Вот нарисовал пример: prnt.sc/s7vou0
Красный прямоугольник 100х800 - это контейнер, чёрный прямоугольник 300x800 - это картинка cover (сама картинка в натуральный размер может быть, например, 3000х8000 px).

Меня конкретно интересует как получить значения 300 и 800 у фоновой картинки

[hzzzzl]

Dubrovin, но а почему "чёрный прямоугольник 300x800 - это картинка cover"? она же обрезается по размерам внешнего дива и не рендерится где-то там снаружи

If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.