响应式背景 css答案

【问题标题】：Responsive background css响应式背景 css
【发布时间】：2021-08-05 17:18:36
【问题描述】：

我正在尝试让我的背景图片具有响应性。背景是响应式的，直到它达到较小的屏幕尺寸。当浏览器宽度变为大约 600px 时，右侧的一些空白区域出现在图像旁边。但是，在 600 像素以上，背景图像会随着浏览器宽度正确调整大小。你能看出我做错了什么吗？ group div 中的 izonebg 图像导致问题

这是一张图片：

这是我的代码：

body{
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
}

.container{
    width: 100%;
}


header{
    padding: 2em 2em;
    margin: -1em 0;
}

.logo{
    background: url('izonebg.jpg') no-repeat left;
    background-size: auto 100%;
    display: block;
    width: 400px;
    height: 65px;
 
}

@media (min-width: 675px){
    .logo{
        width: 500px;
        height: 108px;
    }
}

.groupbg{
    width: 100%;
    top: 0;
    left: 0;
}

#aboutiz{
    font-family: Kiona;
    font-size: 2.5em;
    font-weight: 500;
    margin: 0;
    margin-top: 10px;
    padding: 10px;
}

.content-wrapper{
    width: 85%;
    margin: 0 auto;
}

.content-flex{
    display: flex;
    flex-direction: column;
}

#about-content{
    font-family: Acid;
    font-size: 1.3em;
    margin: 0;
    margin-top: 1.15em;
    margin-left: 0.5em;
    text-align: justify;
    padding-bottom: 1.5em;
    
}

@media (min-width: 860px){
    .content-flex{
        flex-direction: row;
    }
    
    #aboutiz{
        font-size: 3.7em;
    }
    
    #about-content{
        font-size: 1.75em;
        margin-left: 2em;
    }
}

.info{
    padding-bottom: 2em;
}

<body>
    <header>
        <div class = "container">
            <div class = "logo">
            </div>
        </div>
    </header>
    
    <div class = "container">
        <main role = "main">
            <div class = "group">
                <img src = "izonebg.jpg" alt = "group" class = "groupbg">
            </div>
            
            <div class = "content-wrapper content-flex">
                <div class = "about">
                    <p id = "aboutiz">ABOUT IZ*ONE</p>
                </div>
            
                <div class = "info">
                    <p id = "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie ipsum at mi tincidunt, ac bibendum tortor rutrum. Morbi arcu tortor, pretium quis auctor sed, maximus eu lectus. Vestibulum eu consequat metus. Vivamus eu turpis eu enim aliquet sagittis. Mauris non malesuada felis. Quisque lacinia luctus sagittis. Integer eu ultrices dolor. In est sapien, eleifend nec lorem in, ultricies malesuada lacus. Sed non nunc eu turpis ultrices dapibus vitae nec ligula. </p>
                </div>
            </div>
        </main>
    </div>
</body>

【问题讨论】：

不提供图片无法重现该行为
哪个图像出现问题（CSS 背景之一 - 徽标 - 或具有 bg 类的 div）？无论我使用哪种纵横比图像，我都无法重现该问题，因此我认为您必须使用实际图像设置一个有效的 sn-p，以便我们可以尝试。
@Spectric 我会编辑问题并提供图片
@AHaworth group div 中的 izonebg 图像导致了问题。我现在添加了图像。我也应该提供代码 sn-p 吗？
是的，请提供一个我们可以运行的工作 sn-p，因为我无法重现您的图像和当前问题中的代码的问题。

标签： html css responsive-design responsive-images

【解决方案1】：

您需要将width: 400px 更改为width:100% 并在.logo 中再添加一个属性max-width:400px。可以关注下面的sn-p，希望这个sn-p对你有很大帮助。

*,*::before,*::after{
    box-sizing: border-box;
}    
body{
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
}
.container{
    width: 100%;
}
header{
    padding: 2em 2em;
    margin: -1em 0;
}
.logo{
    background: url('https://i.stack.imgur.com/QBunR.jpg') no-repeat left;
    background-size: auto 100%;
    display: block;
    width: 100%;
    max-width: 400px;
    height: 65px;
}
@media (min-width: 675px){
    .logo{
        width: 500px;
        height: 108px;
    }
}
.groupbg{
    width: 100%;
    top: 0;
    left: 0;
}
#aboutiz{
    font-family: Kiona;
    font-size: 2.5em;
    font-weight: 500;
    margin: 0;
    margin-top: 10px;
    padding: 10px;
}
.content-wrapper{
    width: 85%;
    margin: 0 auto;
}
.content-flex{
    display: flex;
    flex-direction: column;
}
#about-content{
    font-family: Acid;
    font-size: 1.3em;
    margin: 0;
    margin-top: 1.15em;
    margin-left: 0.5em;
    text-align: justify;
    padding-bottom: 1.5em;
}
@media (min-width: 860px){
    .content-flex{
        flex-direction: row;
    }
    #aboutiz{
        font-size: 3.7em;
    }
    #about-content{
        font-size: 1.75em;
        margin-left: 2em;
    }
}
.info{
    padding-bottom: 2em;
}

<header>
    <div class="container">
        <div class="logo">
        </div>
    </div>
</header>

<div class="container">
    <main role="main">
        <div class="group">
            <img src="https://i.stack.imgur.com/QBunR.jpg" alt="group" class="groupbg">
        </div>

        <div class="content-wrapper content-flex">
            <div class="about">
                <p id="aboutiz">ABOUT IZ*ONE</p>
            </div>

            <div class="info">
                <p id="about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie ipsum at mi tincidunt, ac bibendum tortor rutrum. Morbi arcu tortor, pretium quis auctor sed, maximus eu lectus. Vestibulum eu consequat metus. Vivamus eu turpis eu enim aliquet sagittis. Mauris non malesuada felis. Quisque lacinia luctus sagittis. Integer eu ultrices dolor. In est sapien, eleifend nec lorem in, ultricies malesuada lacus. Sed non nunc eu turpis ultrices dapibus vitae nec ligula.
                 </p>
            </div>
        </div>
    </main>
</div>

【讨论】：

我的问题是group div 中的背景图片。这个奇怪的事情是，当我在这里运行代码 sn-p 时背景图像是响应式的，但是当我运行我的文件时，图像没有响应式：//我做了和你完全相同的事情，但它没有响应
@Nasheetat 您可能需要通过您的browser 上的Inspect Element 方法检查覆盖样式。可能是在您现有的样式文件中为.group div 编写的一些样式。