动态调整背景图片的大小 div

Question

我在 header 中有一张背景图片，它会自动调整为 window 的宽度。但是，高度未正确调整——继承的 CSS 属性将 div 设置为 50 像素的固定高度。

目前，我正在使用：

background-size: cover;

我可以为将要观察的 div 指定一个固定高度，但背景仅在特定 window 尺寸时才是正确的。如果我将大小设置为自动或 100%，它将变为 50px；我怎样才能让它忽略它认为它应该是的高度并且只是将 header div 自动调整为调整为 window 大小的背景图像？

Answer 1

您试过使用这样的特定尺寸吗？

background-size: 100% 100%;

Answer 2

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>

动态调整背景图片的大小 div

Dynamically resize div for background image

css

background-image

image-resizing