Question

我一直在处理一个自适应网站，并且在图像地图方面遇到了一些问题。似乎图像映射不适用于基于百分比的坐标。经过一番谷歌搜索后，我找到了一个JS解决方法 - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html。但是我希望该网站能够与JS禁用。

因此，在耗尽了这些可能性后，我决定研究在图像上使用相对定位的Anchor标签来做同样的事情。无论如何，这是一个更好的选择IMO。我试图将锚标记放在图像上，基于百分比的位置和大小，但每当我重新缩放浏览器时，锚标记都会不成比例地移动到图像上。

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/。当我调整HTML框的大小时，一切都会变得偏斜。

任何帮助都非常感激。

Answer 1

您在发布的小提琴中遇到了一些问题（以及缺少结束div标记）。在确保#block相对定位，而不是100％高度，并且您的锚点被阻止/绝对定位后，我能够让标签与块一起移动。

这是更新的小提琴：

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。出于某种原因，某些浏览器在没有大写时不喜欢它。

Answer 2

绝对定位的元素不再是布局的一部分，因此它们无法从父级继承相对的维度属性。你需要JavaScript来做你想做的事。

禁用JS的人预计会有降级的体验。

响应式CSS图像锚标签 - 图像地图样式

2 个答案: