我一直在开发一个响应式网站，并且在图像映射方面遇到了一些问题。图像映射似乎不适用于基于百分比的坐标。
经过一番谷歌搜索后，我发现了一个 JS 解决方法 -http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html。
不过我希望该网站能够在禁用 JS 的情况下工作。
因此，在穷尽这些可能性之后，我决定研究在图像上使用相对定位的锚标签来完成同样的事情。无论如何，这是一个更好的选择。
我尝试将锚标记放置在基于百分比的位置和大小的图像上，但是每当我重新缩放浏览器时，锚标记都会不成比例地移动到图像。
HTML:
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
<a href="#" class="one"></a>
<a href="#" class="two"></a>
</div>
CSS:
#block img {
max-width: 100%;
display: inline-block;
}
a.one{
height:28%;
width:19%;
top:-36%;
left:1%;
position:relative;
display:block;
}
a.two{
height:28%;
width:19%;
top:37%;
left:36%;
position:absolute;
}
这是一个 jsFiddle 来描述我的意思 -http://jsfiddle.net/wAf3b/10/ http://jsfiddle.net/wAf3b/10/。当我调整 HTML 框的大小时，一切都会变得倾斜。
非常感谢任何帮助。
您发布的小提琴中的 CSS 存在一些问题（以及缺少结束语）div标签）。确定之后#block是相对定位的，而不是 100% 高度，并且你的锚点是块/绝对定位的，我能够让标签随块移动。
这是更新的小提琴：
http://jsfiddle.net/wAf3b/24/ http://jsfiddle.net/wAf3b/24/
CSS
html, body {
height: 100%;
}
#block{ float:left; width:100%; max-width: 400px; position: relative; }
#content{
height: 100%;
min-height: 100%;
}
#block img {
max-width: 100%;
display: inline-block;
}
a.one{ height:28%; width:25%; position: absolute; top:55%; left:5%; display:block; background:rgba(0,255,0,0.5);}
a.two{ height:28%; width:25%; position: absolute; top:60%; left:70%; display: block; background:rgba(255,0,0,0.5);}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Bulky Waste</title>
</head>
<body>
<div id="content">
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
<a href="#" class="one"></a>
<a href="#" class="two"></a>
</div>
</div><!--/content-->
</body>
</html>
新 html 需要注意的一件重要事情是使用DOCTYPE。由于某种原因，某些浏览器不喜欢它不大写。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
