如何使overlay-text宽度与响应式img保持一致？

没问题！要让overlay-text的宽度完全跟响应式图片保持一致，核心是修正绝对定位元素的参照对象——你的问题大概率是因为overlay-text没有以图片的容器为定位基准，导致width:100%计算的是视口或其他上层元素的宽度，而非图片本身的宽度。

下面是具体的修复步骤：

1. 给图片添加父容器并设置相对定位 #

给图片套一个父容器，并且给这个容器加上position: relative。绝对定位的元素会默认参照最近的非static定位父元素，这样overlay-text的尺寸和位置就会以这个容器为基准，而容器的宽度会自动匹配图片的宽度。

2. 确保图片是真正的响应式 #

给图片添加max-width:100%; height:auto;，保证它在不同屏幕尺寸下能自适应父容器的宽度，不会超出容器范围。

完整代码示例 #

HTML结构 #

<div class="image-wrapper">
  <img src="your-image-path.jpg" alt="描述图片内容" class="responsive-image">
  <div class="overlay-text">这里是覆盖在图片上的文本</div>
</div>

CSS样式 #

.image-wrapper {
  position: relative; /* 关键：让overlay-text以此容器为定位参照 */
  display: inline-block; /* 让容器宽度自动匹配图片的实际宽度 */
  /* 如果需要图片占满父容器的宽度，把inline-block换成block即可 */
}

.responsive-image {
  max-width: 100%;
  height: auto;
  display: block; /* 消除图片底部默认的空白间隙 */
}

.overlay-text {
  background-color: #79b13c;
  color: white;
  z-index: 50;
  position: absolute;
  bottom: 0px;
  width: 100%; /* 现在这个100%是相对于image-wrapper的宽度，也就是图片的宽度 */
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  -webkit-transition: background-color 0.5s ease-in-out, font-size 0.5s;
  transition: background-color 0.5s ease-in-out, font-size 0.5s; /* 补充标准transition，提升浏览器兼容性 */
}

为什么这样有效？ #

当image-wrapper设置了position: relative后，overlay-text的绝对定位就会绑定到这个容器上。容器的宽度会随图片的响应式变化而同步调整，此时overlay-text的width:100%就会精确匹配图片的宽度，不管屏幕分辨率怎么变，两者的宽度都会保持一致。

内容的提问来源于stack exchange，提问作者James Freight