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

Question

我为我的div

做了这样的背景

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

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

        <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，因为它会降低图像质量。可能你的 parent 无法控制 child。你的 background-image 应该是 top center 和 background-size: contain; 如果它不起作用，请使用您的代码制作一个 jsfiddle 或 codepen，我可以快速修复它，但您的代码片段很难理解，我也需要您的 parents 样式。看看这些演示（它们可以帮助你）： https://www.webfx.com/blog/web-design/responsive-background-image/

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

How to make responsive background-image?

html

css

responsive-images