动态调整div的背景图像

Question

我在标题中有一个背景图像，可自动调整窗口宽度。但是，高度调整不正确 - 继承的CSS属性将div设置为50px的固定高度。

目前，我正在使用：

background-size: cover;

我可以为将要观察的div指定固定高度，但是背景仅在特定窗口大小时才是正确的。如果我将大小设置为auto或100％，则为50px;如何让它忽略它认为应该的高度，并将标题div自动调整为适应窗口大小的背景图像？

Answer 1

div不会展开以适应背景图像。如果您总是希望显示完整的图像并使用div进行扩展，则可以使用图像标记和一些偷偷摸摸的定位来伪装背景。

img.header-image {
    width: 100%;
    height: 100%;
}

div.header-wrapper {
    position: relative;
}

div.header-contents {
    position: absolute;
    width: 100%;
    top: 0;
    color: #ffffff;
}

<div class="header-wrapper">
    <img class="header-image" alt="Cat Background" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR39_wPEnBeSEOiHXW1Lc0rwqhEVktULcqnvDDA4J-DZL0gndic" />
    <div class="header-contents">Here are some header contents.</div>
</div>
<div class="body-contents">And some regular content.</div>

Answer 2

您是否尝试使用这样的特定尺寸？

background-size: 100% 100%;