如何将图片盒模型限制在实际显示区域？（object-fit与imagemap场景）

方案一：约束图片盒模型到实际显示尺寸 #

放弃使用object-fit: contain，通过嵌套容器的方式让图片自然缩放，这样图片的盒模型会自动匹配实际显示的大小，imagemap的坐标就能正常对应。

具体实现：

1. 给图片套一层容器，用flex布局实现居中对齐
2. 图片设置max-width: 100%和max-height: 100%，让它自动缩放到容器允许的最大尺寸

代码示例：

<div class="img-wrapper">
  <img src="square-image.jpg" usemap="#image-map" alt="Square image">
</div>
<map name="image-map">
  <!-- 这里的coords直接对应原始图片的像素位置即可 -->
  <area shape="rect" coords="20,20,80,80" href="#" alt="Sample area">
</map>

.img-wrapper {
  width: 100%; /* 容器宽度可变 */
  height: 300px; /* 容器高度可变，可根据需求动态调整 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

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

这种方法无需额外JS，完全靠CSS实现，imagemap的坐标可以直接沿用原始图片的定义，不会出现错位。

方案二：用JavaScript获取图片实际显示的尺寸与位置 #

如果必须保留object-fit: contain，可以通过JS计算图片实际显示的区域，再根据这个结果修正imagemap的坐标。

核心思路：根据容器和图片的宽高比，计算图片实际显示的宽高、偏移量（因为object-fit:contain会让图片居中）。

代码示例：

function getImageDisplayInfo(img) {
  const container = img.parentElement;
  const containerW = container.offsetWidth;
  const containerH = container.offsetHeight;
  const imgRatio = img.naturalWidth / img.naturalHeight; // 正方形图片此值为1
  const containerRatio = containerW / containerH;

  let displayW, displayH, offsetLeft, offsetTop;

  if (containerRatio >= imgRatio) {
    // 容器更宽，图片以高度铺满容器，水平居中
    displayH = containerH;
    displayW = displayH * imgRatio;
    offsetLeft = (containerW - displayW) / 2;
    offsetTop = 0;
  } else {
    // 容器更高，图片以宽度铺满容器，垂直居中
    displayW = containerW;
    displayH = displayW / imgRatio;
    offsetLeft = 0;
    offsetTop = (containerH - displayH) / 2;
  }

  return {
    width: displayW,
    height: displayH,
    left: offsetLeft,
    top: offsetTop
  };
}

// 使用示例：修正imagemap坐标
const targetImg = document.querySelector('img');
const displayInfo = getImageDisplayInfo(targetImg);
const originalImgW = targetImg.naturalWidth;
const originalImgH = targetImg.naturalHeight;

// 假设原始coords为[10,10,50,50]，转换为容器内的坐标
const originalCoords = [10,10,50,50];
const newCoords = originalCoords.map((val, index) => {
  if (index % 2 === 0) {
    // X坐标：偏移量 + (原始X/原图宽)*显示宽
    return displayInfo.left + (val / originalImgW) * displayInfo.width;
  } else {
    // Y坐标：偏移量 + (原始Y/原图高)*显示高
    return displayInfo.top + (val / originalImgH) * displayInfo.height;
  }
}).join(',');

// 更新area元素的coords
document.querySelector('area').setAttribute('coords', newCoords);

你可以把这个计算逻辑封装成函数，在容器尺寸变化时（比如窗口 resize）重新计算并更新imagemap的坐标。

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