使用引导程序和 CSS 的响应式点击区域

Question

我正在尝试为具有 2 个链接的图像创建一个响应式点击区域，下图中的每个矩形中都有一个。这是我现在正在使用的代码。它没有任何映射，我将进一步解释原因：

  <figure id="vpg">
     <img  src="{{asset('img/click area.png')}}" class="img-responsive" width="1024" height="768"alt=""/>

我尝试使用地图类和坐标点，效果很好，但没有响应。 然后我搜索并尝试使用 Matt Stow 插件：https://github.com/stowball/jQuery-rwdImageMaps，但没有成功。我相信这是因为引导程序或其他原因，因为他的示例不适用于 img-responsive 类。
这是图片：
关键是，我需要使用这个类 img-responsive，有什么我遗漏的吗？我应该如何进行？有没有办法用css做到这一点？我找到了这个例子，但我无法理解： http://techlife.samsung.com/the-perfect-game-day-set-up.html

Answer 1

Vinicius Pacheco Vieira 回答和链接有效。这一切都在网格系统中为您完成，如引导程序或基础使用。在此处下载 Foundation Foundation Grid system 并阅读其网站上的文档以了解有关网格系统的更多信息。一切都归结为预定义宽度的预制 div，因此当您将图像放入其中时，它将与图像周围的这个 div 一起缩放。使用 Foundation，您可以获得完整的 CSS 文件，其中进行了所有基本设置，但如果您想更改某些内容，只需在浏览器中使用检查器元素（F12 键）在代码中找到它并指向要检查的元素。这将向您显示哪个文件正在控制哪个类以及里面的内容......等等。

Answer 2

尝试使用此 img 标签而不设置宽度和高度。通过这种方式，您可以通过操作其样式来控制 css 文件中的宽度和高度。尝试使用 % 而不是 px，因为这样 % 将保持相对于屏幕宽度。 如果这没有帮助，那么去掉 img 标签中的宽度和高度，并在新的 div 中包围你的 img 和图形（使用网格系统，如果你使用的是引导程序，它已经在 css 文件中创建）。这样网格系统将控制图像和其中子元素的宽度。
希望我回答了你的问题。

Answer 3

使用 mackelele 和 4ever Youngz 的概念，我说我以解决这种情况的代码结束。

<style>
#counter {
          position: relative;
      }
      #background{


      }
      #squaremoreleft{
        position:absolute;
        width: 20%;
        left:5%;
        top:51%;
      }
      #squareright{
        position:absolute;
        width: 20%;
        left:26%;
        top:51%;
      }
</style

<div class="container">
          <div class="row-fluid">
            <div class="span12">
              <div id="counter">
                <img id="background"src="{{asset('img/imgbackground.png')}}" class="img-responsive"/>
                <a href="link1">
                <img id="squaremoreleft"src="{{asset('img/squareleft.png')}}" class="img-responsive" />
                </a>
                <a href="link2>
                <img id="squareright"src="{{asset('img/squareright.png')}}" class="img-responsive" />
                </a>
              </div>
            </div>
          </div>
        </div>

代码灵感来源于这个问题Responsive images positioned over image及其源代码：http://jsfiddle.net/MgcDU/12389/