如何在选择匹配的响应式图像文件时替换 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.pngbackground-1-medium.pngbackground-1-big.pngbackground-2-small.pngbackground-2-medium.pngbackground-2-big.png我知道如何在 JavaScript 中替换当前图像的路径，但是我没有找到替换所有@media查询的方法。