Я чувствую слишком много JS для реализации фонового изображения.
Если мы знаем соотношение сторон изображения, я предпочитаю «относительное» решение, а не «динамическое». Поскольку единица % padding-top разрешается по ширине элемента, нам лучше использовать «padding-top» в единице %. возьмем, к примеру, изображение 1000x300. Соотношение сторон 0,3 (300/1000). Таким образом, установка «padding-top:30%» для элемента должна помочь.
В случае динамического изображения рассчитайте соотношение сторон с помощью JS. Затем установите padding-top в % один раз. Нет необходимости прослушивать событие изменения размера.
