Div与背景图像大小相同

所以我有一个背景图像的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始终是整个网站的全部宽度。

来源

2016-07-02 mheonyae

是你正在寻找实现的东西？ https://jsfiddle.net/sanjeevks121/koLrs1Le/ –

我想你的div是站点/窗口的完整大小，你可以尝试使用'vw/wh'像这样：'#headerimg {background：url（http： //images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg）no-repeat top center; background-size：cover; 宽度：100vw; 身高：100vh; }' – Konrud

当您调整大小时，您是否希望保持div的纵横比？ – jazibobs

会像下面为你工作：

https://jsfiddle.net/44k0320v/

我已经更新了你的头宽度使用50vw单位，你的榜样形象具有arount的纵横比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; 
}

来源

2016-07-02 12:36:41 jazibobs

是的，那就是我一直在寻找的。但是，我还可以让文字缩放，而让窗口更小或更大？ – mheonyae

是的，你可以在CSS上面粘贴'font-size：3.5vw'来看看吗？ – jazibobs

是的，我明白了，但是如果我调整窗口的大小，文本会保持相同的大小，如果需要，它只需将它自己分成两行。 – mheonyae

类似的解决方案，以jazibobs，也利用大众高度，但更多的 “flowy” 文本。目前，背景会对几乎任何宽度做出反应，但是在较窄的宽度下，对文本没有多大意义。为此，您可以使用媒体查询，甚至可以以较小的宽度隐藏背景或仅设置较小的文本。

https://jsfiddle.net/kzhzasot/

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

.header{ 
    margin: 0px; 
    padding: 0; 
    color: white; 
    text-align: center; 
    font-size: 50px; 
    display: table; 
} 

h1 { 
    display: table-cell; 
    vertical-align: middle; 
}

来源

2016-07-02 12:53:11

Div与背景图像大小相同

回答

相关问题