使用 bootstrap 和 CSS 的响应式点击区域

Question

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

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

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

Answer 1

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

Answer 2

使用 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 and its source code: http://jsfiddle.net/MgcDU/12389/

Answer 3

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

使用 bootstrap 和 CSS 的响应式点击区域

Responsive Click Area using bootstrap and CSS

html

css

jquery

twitter-bootstrap-3

responsive