如何实现响应式图片上的叠加文本随图缩放并保持定位对齐

你现在出现对齐失效的根本原因有两个：

• 文本设置了绝对定位，但直接父容器没有加相对定位，定位基准不是图片的包裹容器
• 定位值、字号都用了固定px单位，图片响应式缩放时这些固定值不会等比例变化，自然会错位

核心解决逻辑是让文本的定位基准和图片完全绑定，所有位置、尺寸、字号都用相对比例单位，和图片缩放比例完全同步，不需要依赖JS监听resize事件，纯CSS就能实现。 #

具体实现步骤 #

1. 修正定位层级
   给同时包裹图片和文本的容器加position: relative，让内部绝对定位的文本直接以这个容器为定位基准。同时给容器设置和图片一致的尺寸约束，避免容器宽度大于实际渲染的图片宽度导致定位偏移。
2. 固定像素值转百分比
   先拿到你所用图片的原始分辨率：这张图原始宽1024px、高768px，测量出白色矩形在原图上的位置和尺寸：
   • 矩形左边缘距图片左边缘150px → 换算为百分比：150 / 1024 * 100% ≈ 14.65%
   • 矩形上边缘距图片上边缘275px → 换算为百分比：275 / 768 * 100% ≈ 35.81%
   • 矩形宽度320px → 换算为百分比：320 / 1024 * 100% = 31.25%
   • 矩形高度120px → 换算为百分比：120 / 768 * 100% = 15.625%
     后续定位、文本容器尺寸直接用这些百分比值，不管图片缩放到多大，位置比例都和原图完全一致。
3. 字号用相对单位实现同步缩放
   不要用固定px字号，用容器查询单位cqw（1cqw等于容器宽度的1%），字号会跟着容器宽度等比例缩放，和图片缩放节奏完全匹配，再搭配clamp()限制最小、最大字号，避免极端尺寸下文字过大或过小。

修正后可直接运行的代码 #

/* 图片和文本的共同包裹容器 */
.img-wrap {
  position: relative;
  width: 100%;
  max-width: 48rem; /* 可根据需求调整图片最大显示宽度 */
  container-type: inline-size; /* 开启容器查询，给cqw单位提供计算基准 */
}
.img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
#text {
  position: absolute;
  z-index: 100;
  margin: 0;
  color: #000;
  font-weight: bold;
  /* 字号随容器宽度缩放，原始尺寸下约24px，最小不小于12px */
  font-size: clamp(12px, 2.3cqw, 24px);
  /* 百分比定位，和原图白色矩形位置完全对齐 */
  left: 14.65%;
  top: 35.81%;
  /* 文本容器尺寸和白色矩形比例一致，避免溢出 */
  width: 31.25%;
  height: 15.625%;
  /* 文本在区域内的排版调整，可根据业务需求修改 */
  box-sizing: border-box;
  padding: 0 2%;
  display: flex;
  align-items: center;
}

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12">
    <div class="flex flex-wrap lg:items-center min-h-screen">
        <div class="flex flex-col w-full lg:w-1/2 justify-center items-center">
            <div class="img-wrap">
                <img src="https://i.imgur.com/sxnQAi2.png" class="object-contain max-h-full">
                <p id="text">Dynamic text!</p>
            </div>
        </div>
        <div class="flex flex-wrap w-full lg:w-1/2 justify-center">
            <h3 class="text-3xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
        </div>
    </div>
</div>

适配说明 #

• 如果后续更换了底图，只需要重新测量新图上目标区域的原始像素位置、尺寸，重新换算成百分比替换对应值即可，其他逻辑不需要调整。
• 如果需要兼容不支持容器查询单位的老旧浏览器，可以把cqw换成vw单位，根据大屏下容器占视口的比例换算对应值即可，cqw是目前适配精度最高的方案。
• 不要直接给图片加外边距，如果需要调整图片和其他元素的间距，把边距加在最外层的包裹容器上，避免百分比定位出现偏移。

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