如何让叠加层div根据图片尺寸自动调整大小

你当前代码的核心问题是：.underneath用了position: absolute，脱离了文档流，导致.container的高度完全由.overlay的内容决定，没法跟着图片尺寸走。要实现叠加层自动匹配图片大小，按下面的方式修改代码：

修改后的完整代码 #

CSS 代码 #

.container {
  position: relative;
  /* 让容器由内部图片撑开 */
  display: inline-block;
  /* 可选：如果需要容器占满父容器宽度，就换成width: 100% */
}

.underneath img {
  width: 100%;
  height: auto;
  /* 保证图片自适应容器，同时保持原有比例 */
  display: block;
  /* 去掉图片默认的底部间隙 */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 20px;
  text-align: center;
  z-index: 2;
  /* 让文本垂直水平居中，优化UI */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.overlay h1, .overlay h3 {
  color: rgb(255, 255, 255) !important;
  margin: 0.5rem 0;
}

HTML 代码 #

<div class="container">
  <div class="underneath">
    <img src="./overviewBanner.webp">
  </div>
  <div class="overlay">
    <h1><strong>Let's see what to do today</strong></h1>
    <h3> Check below how to contribute</h3>
  </div>
</div>

关键改动说明 #

• 移除了.underneath的position: absolute，让图片留在文档流里，撑满容器的尺寸
• 给图片设置width:100%; height:auto，确保图片自适应容器同时不拉伸变形
• 把.overlay改成绝对定位，通过top/left/width/height:100%让它完全覆盖在图片上方，尺寸和图片保持一致
• 用Flex布局让叠加层里的文本垂直居中，同时添加内边距避免文本贴边，提升UI体验

内容的提问来源于stack exchange，提问作者Arfaoui Mohamed Amine