Question

所以我有一个带有背景图像的div，我想在调整窗口大小时使div与背景图像大小相同，所以我可以在它的中心放置一些文本，我想要成像为响应，所以div也。

我的html图片和文字：

<div id="headerimg" class="header">
    <h1>Welcome to my website</h1>
</div>

到目前为止

和我的cc：

#headerimg{
    background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
    background-size: cover;
    width:100%;
}

.header{
    height: 700px;
    width: 100%;
    margin: auto;
    padding: 20%;
    color: white;
    text-align: center;
    font-size: 50px;
}

我只是使用谷歌atm的随机图片，以后更换;但无论如何..我怎么能得到高度对齐？ Jquery可能吗？ - 但我真的不太熟悉jquery ......是的，我希望div一直是网站的全宽。

Answer 1

以下内容适用于您：

https://jsfiddle.net/44k0320v/

我已将您的标题宽度更新为使用50vw单位，您的示例图片的宽高比为2：1，这意味着如果您希望div保持正确的高度，则需要将高度设置为视口宽度的一半（横跨屏幕宽度的测量值为100vw）。

我还更新了背景图片，使其大小为100%而非cover，因此宽度将随div缩放。

我还更新了字体大小以使用vw单位。

下面的新css：

#headerimg{
    background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
    background-size: 100%;
}

.header{
    box-sizing: border-box;
    height: 50vw;
    width: 100%;
    margin: auto;
    padding: 10% 20%;
    color: white;
    text-align: center;
    font-size: 3.5vw;
}

Answer 2

类似于jazibobs的解决方案，也使用了vw高度，但更多＆＃34;流畅＆＃34;文本。目前背景将对几乎任何宽度作出反应，但是在窄宽度下它对文本来说并没有多大意义。为此，您可以使用媒体查询甚至可能以较小的宽度隐藏背景，或者只是将文本设置得更小。

https://jsfiddle.net/kzhzasot/

node_modules/bootstrap-sass/templates/project/_bootstrap-variables.scss

与背景图像相同的大小

2 个答案: