如何根据图片容器div的尺寸动态在其左上角添加适配文本

方案1：纯CSS定位（优先推荐） #

无需复杂逻辑，调整DOM结构加少量样式即可实现，适配所有动态尺寸场景：

• 把.imageNameStyle文本DIV移动到outer-container内部，作为该容器的第一个子元素
• 给outer-container添加position: relative属性，以它作为定位父级，它本身的动态宽高会自动适配图片尺寸
• 给.imageNameStyle添加如下样式：

.imageNameStyle {
  position: absolute;
  top: 8px; /* 可自定义距离图片顶部的间距 */
  left: 8px; /* 可自定义距离图片左侧的间距 */
  z-index: 10; /* 保证文本层级高于画布/图片，不会被遮挡 */
  /* 你原本的文本样式（字号、颜色、背景等）正常保留即可 */
}

该方案天然适配父级transform缩放场景，文本会随图片容器同步缩放、位移，不会出现偏移间隙。

方案2：JS动态适配（无法修改DOM结构时使用） #

如果业务限制不能调整DOM层级，可以通过JS监听容器尺寸动态计算文本位置：

• 用ResizeObserver监听imgOuterContainer的尺寸变化，每次变化时读取容器的位置、以及父级hook的缩放比例，动态计算文本的偏移值
• 图片加载完成、画布缩放操作触发时，额外执行一次位置计算，避免临时偏差
  示例代码：

const imgContainer = document.getElementById('imgOuterContainer')
const nameText = document.querySelector('.imageNameStyle')
const hookNode = document.getElementById('hook')

const updateTextPos = () => {
  // 获取父级缩放比例
  const transformVal = getComputedStyle(hookNode).transform
  const scale = transformVal ? parseFloat(transformVal.split(',')[0].replace('matrix(', '')) : 1
  // 计算文本左侧偏移，8为自定义间距，可自行调整
  const leftOffset = imgContainer.offsetLeft * scale + 8
  nameText.style.transform = `translateX(${leftOffset}px)`
}

// 监听容器尺寸变化
const resizeObserver = new ResizeObserver(updateTextPos)
resizeObserver.observe(imgContainer)
// 监听图片加载完成事件
document.getElementById('canvasLayer').addEventListener('load', updateTextPos)

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