如何将输入框定位到图片指定位置并适配多屏幕？

下面提供几种实用方案，覆盖从纯CSS简便实现到结合JS的精准定位场景，解决不同屏幕尺寸下的位置适配问题：

1. 纯CSS相对容器+百分比定位（最简便） #

核心思路是把图片和输入框放在同一个相对定位容器内，图片自适应容器宽度，输入框用百分比单位做绝对定位，这样位置会随图片缩放比例自动适配，完全不需要JS。

代码示例 #

<div class="image-wrapper">
  <img src="your-object-image.png" alt="物体尺寸示意图" class="responsive-img">
  <!-- 对应长度的输入框 -->
  <input type="number" placeholder="长度" class="input-size input-length">
  <!-- 对应宽度的输入框 -->
  <input type="number" placeholder="宽度" class="input-size input-width">
  <!-- 对应高度的输入框 -->
  <input type="number" placeholder="高度" class="input-size input-height">
</div>

.image-wrapper {
  position: relative;
  max-width: 100%; /* 容器最大宽度不超过父元素 */
  margin: 0 auto; /* 可选：让容器居中 */
}

.responsive-img {
  width: 100%;
  height: auto; /* 保持图片原始宽高比 */
  display: block;
}

.input-size {
  border: 1px solid #ccc;
  padding: 4px 8px;
  /* 基础样式统一 */
}

/* 根据图片上的图标位置调整百分比 */
.input-length {
  position: absolute;
  top: 25%; /* 距离容器顶部的百分比 */
  left: 60%; /* 距离容器左侧的百分比 */
  width: 10%; /* 输入框宽度也用百分比适配 */
}

.input-width {
  position: absolute;
  top: 50%;
  left: 30%;
  width: 10%;
}

.input-height {
  position: absolute;
  top: 75%;
  left: 50%;
  width: 10%;
}

优势 #

• 零JS依赖，兼容性拉满
• 自动适配所有屏幕尺寸，位置始终和图片图标比例对应
• 代码简洁，维护成本低

2. 结合Image Map与JS动态定位 #

如果需要基于已有的Image Map区域数据来定位输入框，可以通过JS计算图片缩放比例，把Image Map的原始像素坐标转换为实际显示位置。

代码示例 #

<div class="image-wrapper">
  <img src="your-object-image.png" alt="物体尺寸示意图" usemap="#object-map" class="responsive-img">
  <map name="object-map">
    <area shape="rect" coords="120,210,180,230" id="area-length" alt="长度输入区">
    <area shape="rect" coords="310,420,370,440" id="area-width" alt="宽度输入区">
    <area shape="rect" coords="220,630,280,650" id="area-height" alt="高度输入区">
  </map>

  <input type="number" placeholder="长度" id="input-length" class="input-size">
  <input type="number" placeholder="宽度" id="input-width" class="input-size">
  <input type="number" placeholder="高度" id="input-height" class="input-size">
</div>

// 定位输入框的核心函数
function positionInputs() {
  const img = document.querySelector('.responsive-img');
  // 获取图片实际显示尺寸和原始尺寸
  const displayWidth = img.offsetWidth;
  const displayHeight = img.offsetHeight;
  const naturalWidth = img.naturalWidth;
  const naturalHeight = img.naturalHeight;
  // 计算缩放比例
  const scaleX = displayWidth / naturalWidth;
  const scaleY = displayHeight / naturalHeight;

  // 批量处理输入框定位
  const pairs = [
    { areaId: 'area-length', inputId: 'input-length' },
    { areaId: 'area-width', inputId: 'input-width' },
    { areaId: 'area-height', inputId: 'input-height' }
  ];

  pairs.forEach(pair => {
    const area = document.getElementById(pair.areaId);
    const input = document.getElementById(pair.inputId);
    const coords = area.coords.split(',').map(Number);
    
    // 转换坐标为实际显示位置
    const left = coords[0] * scaleX;
    const top = coords[1] * scaleY;
    const width = (coords[2] - coords[0]) * scaleX;

    input.style.position = 'absolute';
    input.style.left = `${left}px`;
    input.style.top = `${top}px`;
    input.style.width = `${width}px`;
  });
}

// 页面加载和窗口 resize 时重新定位
window.addEventListener('load', positionInputs);
window.addEventListener('resize', positionInputs);

优势 #

• 复用已有的Image Map区域数据，无需重新计算位置百分比
• 精准匹配图片上的指定区域，适合复杂的示意图场景

3. CSS @media 补充微调（可选） #

如果在极端屏幕尺寸下需要微调输入框位置/大小，可以结合@media规则做补充适配：

@media (max-width: 768px) {
  .input-length {
    top: 23%; /* 小屏幕下微调纵向位置 */
    left: 58%; /* 微调横向位置 */
    width: 12%; /* 放大输入框方便触控 */
  }
}

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