如何制作響應式背景圖像？

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/