移除宽高后图片消失，如何实现CSS图片地图的响应式？

嘿，我来帮你搞定这个问题！你遇到的核心问题是：当移除div的固定width和height后，里面的<a>是绝对定位（脱离文档流），导致div没有内容撑起高度，直接塌陷成0高度，背景图自然就看不到了。下面给你两个靠谱的解决方案，都能实现响应式效果：

方案1：用padding-top维持宽高比（纯背景图方案） #

这个方法的关键是利用padding-top的百分比基于父元素宽度计算的特性，固定容器的宽高比和原图一致，让容器能自适应宽度的同时保持图片比例。

首先计算原图的宽高比：你的原图宽779px、高1122px，所以高度/宽度 = 1122/779 ≈ 1.44（即144%）。修改后的代码如下：

<div class="img-responsive" style="position:relative; width:100%; padding-top:144%; background:url(https://image.ibb.co/eZWkb7/0001.jpg) 0 0 / 100% 100% no-repeat;">
  <a style="background-color:red; position:absolute; top:28.4%; left:25.4%; width:7.8%; height:5%;" title="" alt="..."></a>
</div>

关键修改点： #

• 移除固定height，添加padding-top:144%来维持原图的高宽比
• 设置width:100%让容器自适应父元素宽度
• 背景图添加/ 100% 100%（即background-size:100% 100%），让背景图完全填充容器
• 把<a>的top/left/width/height都转换成百分比（比如原来的top:319px → 319/1122≈28.4%，left:198px→198/779≈25.4%，以此类推）

方案2：用img标签代替背景图（更直观的方案） #

如果觉得背景图的比例控制麻烦，换成<img>标签会更简单——img本身会自动维持宽高比。只需要给外层容器设置相对定位，img自适应宽度，热点区域还是用绝对定位+百分比：

<div class="img-responsive" style="position:relative; width:100%;">
  <img src="https://image.ibb.co/eZWkb7/0001.jpg" style="width:100%; height:auto; display:block;">
  <a style="background-color:red; position:absolute; top:28.4%; left:25.4%; width:7.8%; height:5%;" title="" alt="..."></a>
</div>

优势： #

• img标签的响应式行为更直观，不需要计算padding-top比例
• 搜索引擎能更好地识别图片内容（如果需要SEO的话）

注意事项 #

不管用哪个方案，热点区域的位置和尺寸必须用百分比，不能用固定像素，否则缩放后热点会错位。你可以用这个公式转换：

• 百分比值 = (像素值 / 原图对应维度的尺寸) × 100%
  • 比如top/height用原图高度1122px计算，left/width用原图宽度779px计算

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