div 里面的 div 包括背景图片答案

【问题标题】：Div inside div including background imagediv 里面的 div 包括背景图片
【发布时间】：2026-02-08 17:25:02
【问题描述】：

我有两个 div。第一个是“父级”，它为另一个 div 提供宽度和高度。第二个 div 有 background-attachment: fixed 并且有一个问题......当宽度：100% 和高度：100% 时我的图像不会显示。当图像的高度为：800px 时，一切都很好，但是当我更改屏幕分辨率时，第一个 div 不会随图像缩放，因此图像和其余内容之间有一个空白空间。任何想法如何解决它？感谢您的回复！

<div class="divimgparent">
<div class="divimg"></div>
</div>
.divimgparent {width: 100%; height: auto;}
.divimg {background: url("../images/1.jpg"); width: 100%; height: 800px; background-repeat: no-repeat; background-size: contain; background-attachment: fixed;}

【问题讨论】：

是的，因为您需要将height 提供给父母或孩子。 height:auto; 根据您拥有的内容工作。它没有特定的高度，在您的情况下为 100%，它认为 .divparentimg 的 100%
将 background-size css 属性更改为覆盖。 background-size:cover;然后图片会根据屏幕分辨率进行拉伸。

标签： html css image css-position

【解决方案1】：

试试这个。当你的css是height时，你的父div没有得到高度：auto;。所以，你需要为你的父 div 定义一个高度。

html, body {
  width: 100%;
  height: 100%;
}
.divimgparent {
    width: 100%;
    height: 100%;
}
.divimg {background: url("http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower.jpg");width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-attachment: fixed;}

<div class="divimgparent">
<div class="divimg"></div>
</div>

【讨论】：

【解决方案2】：

<div class="divimgparent">
    <div class="divimg"></div>
</div>

.divimgparent {width: 100%; height: 90vh;}
.divimg {background: url("http://s9.postimg.org/bxayc3y3z/Desert.jpg"); width: 100%; height:100%; background-repeat: no-repeat; background-size: contain; background-attachment: fixed;}

请试试这个。

演示

【讨论】：