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

Question

我在 <div id=underlay> 中有一个 underlay.jpg，我想在上面精确放置标记。做这个的最好方式是什么？

我希望图像填充 div 的 space 并在 window 调整大小时调整标记。我假设在 CSS 中执行此操作是最简单的，但我不确定。

顺便说一句，我正在使用 Javascript 生成标记 divs。这是我当前的代码，当我调整大小时它没有正确调整：

<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

尝试将图像作为 background-image 和 CSS 放在 #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

Answer 2

这是实现此目的的分步教程。

使用 display: inline-block 将容器大小 ( #underlay ) 缩小到图像。还要添加 position: relative.
将标记容器 ( .markers ) 设置为 position: absolute 并使用 height: 100%; width: 100% 或 top: 0; right: 0; bottom: 0; left: 0;.[=21 设置容器尺寸=]
将标记内容翻译到标记位置的中心：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/

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

What is the best way to position <div> markers over a base image and allow for resize?

html

javascript

css

positioning