Question

我的网站存在背景问题。我们的想法不是使用任何媒体查询，而是将所有内容设置为％，以便它始终可以在任何设备上查看。

我的问题是背景图像确实具有正确的css，但高度由div中的内容决定。我希望高度始终按比例增加最大值和比例。

所以我做的是以下内容：

<body>
<div class="wrapper">
    <div class="home_header">
        <div class="home_header_quote">
            <img src="images/home_header_quote.png" />
        </div>
    </div>
</div>
</body>

和我的CSS

.wrapper{
max-width:1400px;   
margin:0 auto;
}

.home_header{
background:url(../images/header_home.png) no-repeat;
background-size: 100% 100%;
max-width:1400px;
max-height:320px;
}

.home_header_quote{
max-width:100%;
height:auto;
}

我希望任何人都可以为我提供非JQuery解决方案

Answer 1

将背景大小更改为覆盖。

.home_header{
background:url(../images/header_home.png) no-repeat;
background-size: cover;
max-width:1400px;
max-height:320px;
}

流体（背景）图像以缩放页面宽度

1 个答案: