主页响应中心上的图片地图答案

【问题标题】：Image map on home page responsive center主页响应中心上的图片地图
【发布时间】：2017-06-20 15:56:25
【问题描述】：

我已经阅读这个论坛一段时间了，并决定我可能会在这个论坛上寻求帮助，因为我找不到任何确切的答案。

我想用一张大照片制作一个登陆页面，并在上面放一张响应式图片地图。我可以制作地图，我可以放置图像，但是当我想让它在图像保持居中（背景位置：中心）时做出响应时，问题就开始了。如果我不使用 background-position:center 图像在移动设备上看起来非常小，它不会像这样工作。

我知道我可以尝试将透明图像放在背景上，但我不知道如何让地图响应。

如果你能帮助我，这是我工作网站的链接http://www.mafia.brandscatter.com/

【问题讨论】：

您好 Tomas，请访问帮助中心，了解如何提出好问题。寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。请参阅：如何创建minimal reproducible example。

标签： html css image dictionary responsive

【解决方案1】：

这样的事情怎么样？

https://jsfiddle.net/Lj0w9dnf/1/

.background{
  background-color:red;
  width:100%;
  height:100vh;
  padding:25%;
}

.map{
  background-color:blue;
  height:100%;
  width:100%;
}


<div class="background">
  <div class="map">  
  </div>
</div>

【讨论】：

这并没有如我所愿，我决定花钱请人来做，我会在这里提供解决方案。