全幅图像上的相对定位答案

【问题标题】：Relative positioning on a full-width image全幅图像上的相对定位
【发布时间】：2017-02-24 00:07:47
【问题描述】：

我有一个自然为1500x1062 的背景图片，带有100vw width 和auto height。

现在，我需要在顶部放置一个图像，该图像需要从顶部精确放置306px，从原始图像左侧精确放置852px。但是，由于另一张图像是 100% 的窗口宽度，因此图像需要随着纵横比的变化而缩放。

我的头很痛，我不知道如何做到这一点。

【问题讨论】：

标签： html css image math position

【解决方案1】：

1500 人中有 306 人是 20.4%。尝试将left:20.4% 分配给较小的图像。你也没有说小图像的原始宽度是多少，只是给它分配宽度的相对百分比

【讨论】：

【解决方案2】：

我觉得关键是要根据浏览器的宽度来设置元素的位置top和宽度，因为是浏览器的宽度决定了图片的宽度，而纵横比并没有改变，它也会决定图像的高度：

.background {
  width: 100vw;
  background-image: url('http://digital-photography-school.com/wp-content/uploads/flickr/5661878892_15fba42846_o.jpg');
  background-size: 100vw;
  height: 800px;
  position: relative;
}

.inner {
  position: absolute;
  left: 25vw;
  top: 40vw;
  width: 1vw;
  height: 1vw;
  background: red;
}

<div class="background">
  <div class="inner">
    
  </div>
</div>

fiddle 方便调整大小：https://jsfiddle.net/pdn2trju/1/

【讨论】：

【解决方案3】：

您是否尝试过将第二张图片的 px 转换为 vw / vh ？一个元素在 px 中，另一个在视口中，在改变纵横比时效果不佳。

【讨论】：