如何修正绝对定位文本偏移基准？实现文本适配图片高度

首先，咱们来拆解你的两个问题，一步步修复：

问题1：文本相对于body偏移，而非容器 #

你已经给父容器#container设置了position: relative，这本身是正确的，但问题出在容器的尺寸上——默认div是块级元素，宽度占满整个页面，而你的图片只设了width: 20%，导致left: 20%是相对于整个页面宽度计算的，刚好落在图片的右侧，看起来像是相对于body偏移。

要让文本相对于图片（也就是容器）偏移，需要让容器的尺寸和图片一致，这样偏移的基准就变成了图片的范围。

修复代码（两种可选方式） #

方式1：给容器设置和图片一致的宽度

#container {
  position: relative;
  width: 20%; /* 和图片的width保持一致 */
}
#top-left {
  color: green;
  position: absolute;
  top: 20%; /* 相对于容器高度偏移20% */
  left: 20%; /* 相对于容器宽度偏移20% */
}
#img {
  width: 100%; /* 图片占满容器宽度 */
  height: auto;
}

方式2：将容器设为行内块元素（宽度由内容撑开）

#container {
  position: relative;
  display: inline-block; /* 容器宽度匹配图片宽度 */
}
#top-left {
  color: green;
  position: absolute;
  top: 20%;
  left: 20%;
}
#img {
  width: 20%;
  height: auto;
}

这样修改后，#top-left的定位基准就完全是#container（也就是图片的范围），偏移20%后会落在图片的左上角区域。

问题2：设置文本大小为图片高度的10% #

CSS无法直接基于图片高度设置字体大小（因为font-size的百分比是相对于父元素字体大小，而非容器高度），所以我们需要用JavaScript来实现：监听图片加载完成，获取它的实际高度，然后计算出10%的高度值，赋值给文本的字体大小。

修复代码（HTML+JavaScript） #

<div id="container">
  <div id="top-left">Vincent Van Gogh - Wheatfield with Crows</div>
  <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Vincent_van_Gogh_%281853-1890%29_-_Wheat_Field_with_Crows_%281890%29.jpg/320px-Vincent_van_Gogh_%281853-1890%29_-_Wheat_Field_with_Crows_%281890%29.jpg" alt="Vincent Van Gogh - Wheatfield with Crows"/>
</div>

<script>
const img = document.getElementById('img');
const topLeftText = document.getElementById('top-left');

// 监听图片加载完成（确保获取到正确的高度）
img.addEventListener('load', () => {
  const imgHeight = img.offsetHeight;
  topLeftText.style.fontSize = `${imgHeight * 0.1}px`;
});

// 处理图片已缓存的情况（避免load事件不触发）
if (img.complete) {
  const imgHeight = img.offsetHeight;
  topLeftText.style.fontSize = `${imgHeight * 0.1}px`;
}
</script>

可选：固定图片比例时的CSS方案 #

如果你的图片比例是固定的（比如这张梵高的画宽高比约为1.44:1），可以用CSS变量结合calc计算，不需要JS：

:root {
  --img-aspect-ratio: 736/509; /* 图片原始宽/高 */
  --container-width: 20vw;
}
#container {
  position: relative;
  width: var(--container-width);
  height: calc(var(--container-width) / var(--img-aspect-ratio));
}
#top-left {
  color: green;
  position: absolute;
  top: 20%;
  left: 20%;
  font-size: calc(var(--container-width) / var(--img-aspect-ratio) * 0.1);
}
#img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这个方案的缺点是如果图片比例变化，需要手动修改--img-aspect-ratio的值，灵活性不如JS方案。

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