CSS图文布局疑问：窗口缩放时如何让文本随图片同步适配

我有一个需每隔几秒更新的sensorvalue（传感器数值），使用图片标识传感器类型，代码大致如下：

<div class="sensor">
    <img src="images/ssensor.png" 
         class="img-fluid img-max">
    <div class="sensortext">
        sensorvalue
    </div>
</div>

对应的CSS代码：

.sensor {
  position: relative;
  width: 100%;
}

.sensortext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -80%);
}

当前布局在窗口尺寸不变时运行正常，但调整窗口大小后，图片会随之缩放，而文本的位置和大小却保持不变，请问如何实现文本随图片同步变换？

要让文本随图片同步缩放、位置适配，从位置对齐和字号缩放两个核心点调整即可：

1. 修复文本的相对位置对齐 #

当前transform: translate(-30%, -80%)是基于文本自身尺寸的偏移，结合top:50%和left:50%，这个逻辑本身是相对的，只要保留偏移比例，就能确保图片缩放时文本相对位置同步变化：

.sensortext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -80%);
}

如果需要文本在图片中心对齐，可改为transform: translate(-50%, -50%)，同样会随图片缩放保持居中状态。

2. 实现文本大小的动态缩放 #

文本大小要随图片尺寸变化，推荐以下几种实用方案：

方案一：视口宽度单位（vw）适配 #

直接用vw（视口宽度的1%）作为字号单位，让文本随窗口宽度同步缩放：

.sensortext {
  /* 其他样式不变 */
  font-size: 2vw; /* 数值可根据实际显示效果调整 */
}

方案二：clamp()函数限制缩放范围 #

结合最小字号、最大字号和视口单位，让文本在合理区间内动态调整，避免过小或过大：

.sensortext {
  /* 其他样式不变 */
  font-size: clamp(16px, 2vw, 24px);
}

这个设置会让字号在16px（最小）到24px（最大）之间，根据视口宽度自动适配。

方案三：基于容器的相对字号 #

给传感器容器设置基准字号，文本用em单位继承缩放，更精准匹配图片尺寸：

.sensor {
  position: relative;
  width: 100%;
  font-size: 1vw; /* 作为文本的基准缩放单位 */
}

.sensortext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -80%);
  font-size: 2em; /* 2倍基准字号，可按需调整 */
}

3. 确保图片缩放的一致性 #

如果img-fluid类未定义，补充以下样式保证图片自适应缩放：

.img-fluid {
  max-width: 100%;
  height: auto;
}

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