时间戳

首页 > 解决方案 > 如何制作响应式背景图像？

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

问题描述

我为自己制作了这样的背景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

标签： htmlcssresponsive-images

解决方案

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

推荐阅读