HTML 中图像上的文字定位不正确

Question

我在图像上正确地制作了文字，但问题是在调整 window.
大小时，我无法弄清楚如何在不移动的情况下将文字固定在固定位置这是我的代码：

img {
  height: 100%;
  width: 100%;
  box-shadow: 0 0 10px black;
}

h1 {
  font-family: 'Courier', monospace;
  font-size: 1rem;
}

.container {
  height: 100vh;
  width: 50vh;
  position: relative;
  text-align: center;
}

.firstName {
  position: absolute;
  top: 0;
  left: 3em;
}

.secName {
  position: absolute;
  top: 1em;
  left: 5em;
  color: rgb(200,0,0);
}

<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>

您看，当您调整 window 大小时，文本会从图像框中弹出。

Answer 1

要使您的文本链接到图像上的指定位置，您可以以百分比设置文本定位。解决方法如下：

img {
  height: 100%;
  width: 100%;
  box-shadow: 0 0 10px black;
}

h1 {
  font-family: 'Courier', monospace;
  font-size: 1rem;
}

.container {
  height: 100vh;
  width: 50vh;
  position: relative;
  text-align: center;
}

.firstName {
  position: absolute;
  top: 0;
  left: 40%;
  transform: translateX(-50%);
}

.secName {
  position: absolute;
  top: 1em;
  left: 60%;
  transform: translateX(-50%);
  color: rgb(200,0,0);
}

<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>

HTML 中图像上的文字定位不正确

Text over an image in HTML not positioning correctly

html

css

position