在响应时相对于其他图像定位图像答案

【问题标题】：Posicionate images relative to other image while being responsive在响应时相对于其他图像定位图像
【发布时间】：2019-03-09 01:03:01
【问题描述】：

我试图将一些图像定位在另一个图像（背景圆圈）上。此图像的位置必须相对于当前大小背景图像（响应式）。我怎样才能做到这一点？直接使用相对位置定位图像？

我目前拥有的： HTML：

<main>
    <img src="bg-image.png" id="bg-image" class="clear">
    <div></div>
</main>

注意：如果我放一个而不是图像将不会显示。我不知道为什么。

CSS：

main {
    background: #f9f9da;
    display: block;
    position: relative;
    height: 100%;
    width: inherit;
    padding-bottom:0;
    text-align: center;
}

img {
    height: 100%;
    width: auto;
}

这很好用。我得到了一个响应式的图像，它会自行调整大小以适应屏幕而不拉伸。

但下一步是在相对于#bg-image 的某些位置定位图像，例如：左上角、中心等。

我该怎么做？提前致谢。

【问题讨论】：

标签： html css twitter-bootstrap-3 bootstrap-4 responsive-images

【解决方案1】：

我不太清楚，但是是这样的吗？

图像的位置是相对于#bg-image的包装器

https://codepen.io/anon/pen/qJZWev

<main>
  <div id="wrapper">
    <img src="http://blog.visme.co/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-03.jpg" id="bg-image" class="clear">
    <div id="other-images">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" />
    </div>
  </div>
</main>

main {
  background: #f9f9da;
  position: relative;
  text-align: center;
}

#bg-image {
  height: 100vh;
  max-width: 100%;
  object-fit: cover;
  width: auto;
}
#wrapper {
  display: inline-block;
  position: relative;
}

#other-images {
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
}

#other-images img {
  max-width: 50%;
}

【讨论】：