如何在选择匹配的响应式图像文件时替换 div 的背景图像？

Question

我有一个带有响应式背景图片的网站div。

我选择通过@media查询获取的图像大小。

代码中的 div 具有 id banner-div。

HTML：

<div id="header-div">

    <div id="background-clipped-div">

        <div id="banner-div">

            <div id="scroll-down-div" onclick="scrollToMainContent()">

                <i class="fas fa-angle-down"></i>

            </div>

        </div>

    </div>

</div>

CSS：

@media only screen and (max-width: 480px) {

    #banner-div {

        background-image: url(images/background-1-small.png);

    }

}

@media only screen and (max-width: 768px) {

    #banner-div {

        background-image: url(images/background-1-medium.png);

    }

}

@media only screen {

    #banner-div {

        background-image: url(images/background-1-big.png);

    }

}

题：

如果我现在想要交换/替换图像，例如通过在多个不同图像之间使用不断变化的背景图像，我将如何在尊重给定分辨率的正确图像的同时做到这一点？

假设我在images文件夹中有以下图像：

• background-1-small.png

• background-1-medium.png

• background-1-big.png

• background-2-small.png

• background-2-medium.png

• background-2-big.png

我知道如何在 JavaScript 中替换当前图像的路径，但是我没有找到替换所有@media查询的方法。