在容器 Bootstrap 中自动调整图像大小 [关闭]答案

【问题标题】：Auto resize images in container Bootstrap [closed]在容器 Bootstrap 中自动调整图像大小 [关闭]
【发布时间】：2016-07-02 01:32:45
【问题描述】：

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

最好的方法是什么？相对定位还是绝对定位？会不会相对容器来说是绝对的？
如何使容器的内容具有响应性（以保持组合的比例）。我可以为此使用 Boostrap 容器吗？

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

非常感谢您的帮助:)

【问题讨论】：

创建一个与箭头图像高度和宽度相同的容器，并将其设置为position:relative;，然后使用position:absolute; 对容器内的其他图像进行顶部/底部和左/右定位。
位置：相对；为了放置箭头或容器？ :)
在下面查看我的答案

标签： javascript html css twitter-bootstrap css-position

【解决方案1】：

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

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

<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>

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

【讨论】：

非常感谢您的帮助 :) ！

【解决方案2】：

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

位置：应更频繁地使用绝对位置。如果您查看CSS，这实际上是绝对和相对的一种反直觉 position: Absolute 帮助您定义与前一个元素相关的精确位置，这就是您将用于排列很多元素的位置。
使用变量而不是固定数字来使元素间距保持恒定比率。

【讨论】：