自动调整容器Bootstrap中的图像大小

Question

我实际上是用HTML5 / CSS3 / JS编写网页代码。它由可以点击不同效果（模态，悬停等）的图像组成。我想在容器中精确定位元素（为了使组合物易于使用）而不是直接在页面中。箭头必须在框中居中，并且不同的按钮必须放置在不同的区域中。 （参见图片）

1. 最好的方法是什么？有相对还是绝对定位？它对容器来说是绝对的吗？

2. 如何使容器的内容响应（为了保持组合物的比例）。我可以使用Boostrap容器吗？

这是我要做什么的截图（按钮图像和箭头图像）：

非常感谢您的帮助：）

Answer 1

扩展我的评论，这是你可以做到的一种方式（前两个点定位）：

＆＃13;

＆＃13;

.container {
  position:relative;
}
img.point {
  position:absolute;
}
  img.point.one {
    bottom:103px;
    left:57px;
  }
  img.point.two {
    bottom:21px;
    left:57px;
  }

＆＃13;

<div class="container">
  <!-- <img class="final" src="https://s31.postimg.org/70gvh473f/final.jpg" /> -->
  <img src="https://s31.postimg.org/g5p8azai3/arrow.jpg" />
  <img class="point one" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
  <img class="point two" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
  <img class="point three" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
  <img class="point four" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
  <img class="point five" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
  <img class="point six" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
  <img class="point seven" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
  <img class="point eight" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
  <img class="point nine" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
  <img class="point ten" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
  <img class="point eleven" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
  <img class="point twelve" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
</div>

＆＃13;

＆＃13;

＆＃13;

就响应性而言，您只需要更改点图像的大小以及每个断点处的底部/左侧值。定位点的最简单方法是将最终图像放在容器内，然后使用检查器将点放在最终图像上。

Answer 2

<span style="position:absolute;left:-50;top:-5;font-size:1px;width:250;height:10px;"> your code </span>

1. 位置：绝对应该更频繁地使用。如果你查看CSS，它实际上是绝对和相对的反直觉 position：Absolute帮助您定义与前一个元素相关的精确位置，这是您将用于批量元素排列的内容。

2. 使用变量而不是固定数来保持元素间距保持恒定。