响应图像映射

Question

我在响应式 html 布局中有一个现有的图像映射。图像根据浏览器大小缩放，但图像坐标显然是固定像素大小。我有哪些选项可以调整图像地图坐标的大小？

原文由 jdog 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于响应式图像映射，您需要使用一个插件：

https://github.com/stowball/jQuery-rwdImageMaps （不再维护）

或者

https://github.com/davidjbradshaw/imagemap-resizer

---

没有主流浏览器能正确理解百分比坐标，所有浏览器都将百分比坐标解释为像素坐标。

http://www.howtocreate.co.uk/tutorials/html/imagemaps

还有这个页面用于测试浏览器是否实现

http://home.comcast.net/~urbanjost/IMG/resizeimg3.html

原文由 Tom 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您还可以使用 SVG 代替图像映射。有 一个关于如何执行此操作的教程。下面的示例，从 这个 jsfiddle 导入。

 .hover_group:hover {
  opacity: 1;
}

#projectsvg {
  position: relative;
  width: 100%;
  padding-bottom: 77%;
  vertical-align: middle;
  margin: 0;
  overflow: hidden;
  background: lightgreen;
}

#projectsvg svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

 <figure id="projectsvg">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet">

    <!-- set your background image -->
    <image width="1920" height="1080" xlink:href="http://placehold.it/1920x1080" />

    <!-- create the regions -->
    <g class="hover_group" opacity="0">
      <a xlink:href="https://example.com/link1.html">
        <text x="652" y="706.9" font-size="20">First zone</text>
        <rect x="572" y="324.1" opacity="0.2" fill="#FFFFFF" width="264.6" height="387.8"></rect>
      </a>
    </g>
    <g class="hover_group" opacity="0">
      <a xlink:href="https://example.com/link2.html">
        <text x="1230.7" y="952" font-size="20">Second zone</text>
        <rect x="1081.7" y="507" opacity="0.2" fill="#FFFFFF" width="390.2" height="450"></rect>
      </a>
    </g>
  </svg>
</figure>

原文由 belgac 发布，翻译遵循 CC BY-SA 4.0 许可协议