html - 如何使用标记实现响应式 map 图像

Question

我有以下代码，显示带有绝对定位标记的 map 。它运行良好，但我有一个新的要求，要求它能够响应屏幕尺寸的变化(针对移动设备进行了优化)。

是否有可能实现这一目标，使标记随着屏幕大小(水平)调整到正确的位置(在本例中是阿拉斯加和格陵兰岛)。

.map-marker {
    position: absolute;
    font-size: 20px;
    text-shadow: 1px 1px 1px #000;
    text-decoration:none;
  }
  .map-marker span {
    position:relative;
    z-index: 2;
    color:#fff;
  }
  .map-marker:before {
    content: "\f111";
    font-family: 'FontAwesome';
    position: relative;
    right: -14px;
    z-index: 0;
  }
  #one {
    top: 70px;
    left: 20px;
  }

  #two {
    top: 50px;
    left: 260px;
  }

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="map_container">
  <img src="http://geology.com/world/world-map-clickable.gif" />
  <a href="#" id="one" class="map-marker">
    <span aria-hidden="true">1</span>
  </a>
  <a href="#" id="two" class="map-marker">
    <span aria-hidden="true">2</span>
  </a>
</div>

Answer 1

您需要一些东西:

• position:relative;display:inline-block;上.map_container ，所以任何 top和left标记上的属性与此包装器相关。 display添加后，它始终具有其内容的宽度(因此是 <img> ) - 否则在大型显示器上它会比图像大并且标记会偏移。如果你想要display:block在上面，只需将其包裹在 <div> 内即可.
• max-width:100%关于<img>元素以使其在移动设备上缩小到最大可用宽度。
• 尝试一下百分比，直到你做对为止。

这是输出:

.map_container {
  position:relative;
  display: inline-block;
}
.map_container img {
  display: block;
  max-width: 100%;
  height: auto;
}
.map-marker {
    position: absolute;
    font-size: 20px;
    text-shadow: 1px 1px 1px #000;
    text-decoration:none;
  }
  .map-marker span {
    position:relative;
    color:#fff;
  }
  .map-marker:before {
    content: "\f111";
    font-family: 'FontAwesome';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #one {
    top: 17%;
    left: 4%;
  }

  #two {
    top: 12%;
    left: 34%;
  }

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="map_container">
  <img src="http://geology.com/world/world-map-clickable.gif" />
  <a href="#" id="one" class="map-marker">
    <span aria-hidden="true">1</span>
  </a>
  <a href="#" id="two" class="map-marker">
    <span aria-hidden="true">2</span>
  </a>
</div>

注意:我还更改了您将图钉居中的方式，因为，由于偏离中心，它们在缩放浏览器时似乎在 map 上移动。