HTML 页面中的图像映射未提供响应式输出答案

【问题标题】：Image Map in HTML page is not giving responsive outputHTML 页面中的图像映射未提供响应式输出
【发布时间】：2017-07-28 13:22:22
【问题描述】：

我正在尝试在 html 页面中显示一张图片，在该图片中我有 6 个圆圈，我想让所有 6 个圆圈都可以点击。

我已经实现了该功能，但它是静态的。这意味着每当我在手机中查看该图像时，所有可点击的圆圈都不在正确的位置。

如何使图像地图具有响应性。

下面是我正在使用的代码

<div>

<img usemap="#planetmap" width="588px" height="471px"   style="display: block;margin: 0 auto;" src = "domains.png";>

<map name="planetmap">
  <area shape="circle" coords="327,70,66" href="#" target="_blank" alt="" />
  <area shape="circle" coords="160,165,66" href="" target="_blank" alt="" />
  <area shape="circle" coords="490,166,66" href="" target="_blank" alt="" />
  <area shape="circle" coords="162,358,66" href="" target="_blank" alt="" />
  <area shape="circle" coords="490,358,66" href="" target="_blank" alt="" />
  <area shape="circle" coords="327,451,66" href="" target="_blank" alt="" />
</map>
<div>


</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min"></script>
<script>    

    $(document).ready(function() {
        $('map').imageMapResize();
    });
</script>

【问题讨论】：

这个链接真的好吗？"jquery.rwdImageMaps.min"

标签： jquery html responsive-design imagemap

【解决方案1】：

当我试图在网页上做出响应式的东西时，我会做两件事之一，我是。使用“媒体查询”，或 b。使用像“Bootstrap”这样的前端 CSS 框架。我个人更喜欢后者。

这是一个媒体查询示例，当满足特定条件时，它将减小指定图像的大小（这在您的 CSS 文件中）：

@media (min-width: 700px)
{
    .map { width: 400px; height: 400px; }
}

现在，如果设备的宽度符合条件，指定的 css 代码将应用于 .map 元素。

这是一个非常基本的示例，但我认为它会让您走上正确的道路。您可以修改媒体查询以更改地图的尺寸以适应不同的屏幕尺寸。更多详细信息请参见此处：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

【讨论】：