使用 bootstrap carousel (4) 如何设置每张幻灯片的响应式背景图片？

如何解决使用 bootstrap carousel (4) 如何设置每张幻灯片的响应式背景图片？

出于灵活性原因，我使用背景图像而不是前景 (src) 设计了一个轮播。我设置了一个通用的背景样式，然后在每张幻灯片中添加一个指向图像的内联样式，例如：

    $img = "path-to-large-img";

    <div class='carousel-item $active set-background-image' style=' background: url($img); '>

这种方法的问题在于，我没有看到根据设备大小来决定显示哪个背景图像的方法。由于它是一个轮播，我将图像设置为内联样式。如果它是单个图像，而不是轮播，我可以在媒体查询中设置图像 url，例如：

    .whatever {
        background: url($large-image);
    }

    @media screen and (max-width: 767px) {
        .whatever {
            background: url($small-image);
        }
    }

但是对于内联样式，我不知道如何实现这一点。有没有办法，怎么做？即使使用 javascript？