如何让重叠在图片上的标题随图片缩放时保持比例对齐？

问题描述 #

我把标题设置为重叠在图片上方，但放大页面时标题会错位，没法和图片按比例缩放。试过用rem和vw单位，问题还是存在，就换回了px单位。目前图片设置为100%宽度适配屏幕尺寸。

问题示意图 #

相关代码 #

CSS代码 #

.image-area {
        background: #f7f7f7;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        z-index: 1;
        padding-bottom: 0;
    }

    .text-area {
        margin-top: 50px;
        position: relative;
    }
    
    .text-area h2 {
          text-transform: capitalize;
          font-size: 50px;
          margin-top: 20px;
          position: absolute;
          z-index:2;
          top:60px;
          left:200px;
    }

HTML代码 #

<div class="image-area">
  <div class="container">
  <div class="row">
      <div class="text-area">
        <h2> HEADER </h2>
      </div>
      <img src="path_to_image/image.png" style="width: 100%; position: relative;">
  </div>
</div>
</div>

解决方案 #

问题核心是固定px定位和布局结构不合理，以下是修正方案：

1. 调整HTML结构：把标题和图片放入同一容器，确保标题的定位参考是图片所在的容器，避免多层嵌套的布局干扰

<div class="image-area">
  <div class="container">
    <div class="row">
      <div class="image-wrapper">
        <h2> HEADER </h2>
        <img src="path_to_image/image.png" style="width: 100%;">
      </div>
    </div>
  </div>
</div>

2. 修改CSS定位逻辑：用百分比或响应式单位替代固定px，让标题位置随图片尺寸同步缩放

.image-area {
  background: #f7f7f7;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
  padding-bottom: 0;
}

.image-wrapper {
  position: relative; /* 设置为标题绝对定位的参考容器 */
}

.image-wrapper h2 {
  text-transform: capitalize;
  font-size: clamp(2rem, 5vw, 3.125rem); /* 响应式字号，适配不同屏幕 */
  position: absolute;
  z-index: 2;
  top: 15%; /* 用百分比代替固定px，随容器高度缩放 */
  left: 10%; /* 用百分比代替固定px，随容器宽度缩放 */
  margin: 0; /* 清除默认margin避免干扰定位 */
}

关键说明 #

• 百分比定位：top和left基于父容器（图片容器）的尺寸计算，缩放时能和图片保持相对位置比例
• 响应式字号：clamp(min, preferred, max)让字号在不同屏幕下自动适配，避免过大或过小
• 结构优化：标题与图片同容器，确保定位参考的准确性，消除外层布局的干扰

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