HTML中图片叠加文本窗口缩放时位置偏移的解决方案咨询

这个问题的核心原因是你当前用固定的em单位来定位文本，而em是基于字体大小的，并没有和图片/容器的尺寸比例绑定。当窗口缩放时，容器的尺寸会变化，但文本的位置不会跟着图片的比例调整，自然就会脱离图片区域。

下面是具体的解决方案，主要思路是让文本的位置相对于图片的比例来定位，同时确保容器和图片保持固定的宽高比，避免图片变形：

修改后的代码 #

CSS 部分 #

/* 容器保持图片的原始宽高比（这里是1:2的竖版比例），确保缩放时不会变形 */
.container {
  width: 50vh;
  height: 0;
  padding-top: 200%; /* 通过padding-top实现1:2的宽高比（宽度的200%即为高度） */
  position: relative;
  text-align: center;
}

img {
  position: absolute; /* 绝对定位填充容器 */
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover; /* 确保图片填充容器且不拉伸变形 */
  box-shadow: 0 0 10px black;
}

h1 {
  font-family: 'Courier', monospace;
  font-size: 1rem;
  margin: 0; /* 移除默认margin，避免影响定位精度 */
}

/* 用百分比定位文本，相对于容器（即图片）的尺寸 */
.firstName {
  position: absolute;
  top: 5%; /* 距离顶部5%的位置 */
  left: 15%; /* 距离左侧15%的位置 */
}

.secName {
  position: absolute;
  top: 12%; /* 调整到合适的垂直位置 */
  left: 25%; /* 调整到合适的水平位置 */
  color: rgb(200,0,0);
}

HTML 部分（无需修改） #

<div class="container">
  <img src="https://i.pinimg.com/564x/ee/84/e5/ee84e597b90f4b6d827f4c73506e700d.jpg">
  <div class="firstName">
    <h1>Eren</h1>
  </div>
  <div class="secName">
    <h1>Yeager</h1>
  </div>
</div>

关键修改点说明 #

1. 固定容器宽高比：用padding-top: 200%替代直接设置height:100vh，这样容器的高度会始终是宽度的2倍，完美匹配图片的竖版比例，缩放时不会变形。如果你的图片是其他比例，只需调整padding-top的百分比即可（比如横版16:9的话，padding-top设为56.25%）。
2. 百分比定位文本：把top和left的em单位换成百分比，这样文本的位置是相对于容器（即图片）的尺寸计算的，不管窗口怎么缩放，文本都会保持在图片上的相对位置。
3. 优化图片显示：给图片添加object-fit: cover，确保图片始终填充容器，不会因为容器尺寸变化而拉伸或变形。

如果你使用的是现代浏览器（Chrome 88+、Firefox 87+等），也可以用更简洁的aspect-ratio属性来替代padding-top的方式，修改容器的CSS如下：

.container {
  width: 50vh;
  aspect-ratio: 1 / 2; /* 直接设置宽高比1:2 */
  position: relative;
  text-align: center;
}

这样修改后，窗口缩放时文本就会牢牢固定在图片的指定位置，不会再偏移啦！

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