如何用HTML和CSS在图片范围内创建固定文本区域？

问题根源在于当前文本的top、left和width都是基于外层.container的百分比计算，和图片的尺寸变化没有绑定关系，窗口缩放时两者比例脱节，就会导致文本超出图片范围。

下面是两种直接可行的修复方案：

方案一：让文本定位绑定图片容器 #

把图片和文本嵌套进一个相对定位的容器，让这个容器的尺寸完全贴合图片，文本的定位和尺寸都基于这个容器，就能保证缩放时和图片同步。

修改后的HTML：

<div class="container">
  <div class="img-wrapper">
    <img class="cpu" src="images/cpu.png" alt="cpu-img">
    <div class="text">
      <!-- 文本内容 -->
    </div>
  </div>
</div>

修改后的CSS：

.container {
  position: relative;
  padding-top: 100px;
  background-color: #222831;
  color: #EEEEEE;
}

.img-wrapper {
  position: relative;
  display: inline-block; /* 让容器完全包裹图片 */
}

.cpu {
  width: 21%; /* 保留原图片宽度比例 */
  padding-top: 40px;
}

.text {
  position: absolute;
  top: 46.5%; /* 基于.img-wrapper的百分比定位，和原位置一致 */
  left: 40%;
  width: 20%; /* 基于.img-wrapper的宽度，和图片同步缩放 */
  word-break: break-word;
  margin: 0; /* 清除默认边距避免错位 */
}

方案二：将图片设为容器背景 #

如果不需要<img>标签的语义化，可以把图片作为文本容器的背景，容器尺寸和图片直接绑定，文本自然不会超出。

修改后的HTML：

<div class="container">
  <div class="text-with-bg">
    <div class="text">
      <!-- 文本内容 -->
    </div>
  </div>
</div>

修改后的CSS：

.container {
  position: relative;
  padding-top: 100px;
  background-color: #222831;
  color: #EEEEEE;
}

.text-with-bg {
  width: 21%;
  /* 用图片实际宽高比计算容器高度，比如图片是400x300，就写calc(21% * 300/400) */
  padding-top: calc(21% * 图片高度/宽度);
  background: url('images/cpu.png') no-repeat center/contain;
  position: relative;
  padding-top: 40px; /* 保留原内边距 */
}

.text {
  position: absolute;
  top: 46.5%;
  left: 40%;
  width: 20%;
  word-break: break-word;
}

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