如何制作响应式背景图像？

Question

我为我的div做了这样的背景

但是当我缩小屏幕尺寸时，你可以在这里看到空白：

那么我该如何解决这个问题呢？

        <div className="bg-home-page">

            <div className="box-discount">
               //some code
            </div>
        </div>

.bg-home-page
    display: flex
    align-items: center
    justify-content: flex-end
    background-image: url('../../assets/bg1.jpg')
    background-repeat: no-repeat
    background-position: center center
    background-size: 100%
    min-height: 550px

Answer 1

在这种情况下，切勿使用min-height ，因为它会使图像质量下降。 可能你的父母无法控制孩子。 你的背景图像应该是top center和background-size: contain; 如果它不起作用，用你的代码制作一个 jsfiddle 或 codepen，我可以快速修复它，但你的代码片段很难弄清楚我也需要你的父母 styles。 看看这些演示（他们可以帮助你）： https://www.webfx.com/blog/web-design/responsive-background-image/