在基本图像上定位<div>标记并允许调整大小的最佳方法是什么？

Question

我在<div id=underlay>中有一个<div id=underlay>，我想精确地在它上放置标记。做这件事最好的方法是什么？

我希望图像填充div的空间，并在调整窗口大小时进行标记调整。我认为在CSS中这样做是最简单的，但我不确定。

顺便说一下，我正在使用Javascript生成标记div。下面是我的当前代码，当我调整大小时，它不能正确地调整：

<div id="underlay">
  <img style="height:auto; width:auto; max-width:100%;" src="underlay.jpg">
   <div id="markers">
      <div id="marker1" style="left:36%; top:56%; position:absolute;">"1"</div>
      <div id="marker2" style="left:45%; top:76%; position:absolute;">"2"</div>
      <div id="marker3" style="left:24%; top:65%; position:absolute;">"3"</div>
  </div>
</div>

Answer 1

这里有一个小的一步一步的教程来实现这一点。

1. 使用#underlay将容器大小( display: inline-block )缩小到图像。还添加了position: relative。
2. 将标记容器( .markers )设置为position: absolute，并使用height: 100%; width: 100%或top: 0; right: 0; bottom: 0; left: 0;设置容器尺寸。
3. 将标记内容翻译到标记位置的中心：transform: translateX(-50%) translateY(-50%);。

​

#underlay {
  display: inline-block;
  position: relative;
}

#underlay>img {
  height: auto;
  max-width: 100%;
  width: auto;
}

#underlay>.markers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#underlay>.markers>.marker {
  position: absolute;
}

#underlay>.markers>.marker>.marker-content {
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="underlay">
  <img src="https://dailykitten.com/wp-content/uploads/2015/04/image17.jpg" />
  <div class="markers">
    <div id="marker1" class="marker" style="left:40%; top:50%;"><i class="marker-content fa fa-arrow-circle-down" style="color:white"></i></div>
    <div id="marker2" class="marker" style="left:60%; top:42%;"><i class="marker-content fa fa-arrow-circle-down" style="color:white"></i></div>
  </div>
</div>

​

演示：http://jsfiddle.net/31480m7n/14/

Answer 2

尝试将图像作为带有CSS的background-image放在#underlay上，并取出图像标记：

#underlay {    
  background-image: url('underlay.jpg');
  background-size: cover;
  position: relative;
  height: 25em;
  width: 25em;
}

玩周围的背景大小，以获得什么对你有用。https://developer.mozilla.org/en-US/docs/Web/CSS/background-size