Как сделать адаптивное изображение в блоке?
1. Есть тег <picture> для показа разных изображений на разных экранах
2. height: auto для пропорций
3. позиционирование 
4. object-fit для правильной обрезки, аналогичной bg size.
Про то, что картинки можно готовить заранее правильных пропорций лучше промолчу.
При наличии этого всего не понятно зачем нужна манипуляция превращения картинок в фон. Разве что кто-то знает js лучше, чем css.
Попробуйте устанавливать величины рисунка в "vh" и "vw".