全角图像上的相对定位

Question

我有一个背景图像，它自然是1500x1062 ，具有100vw width和auto height 。

现在，我需要在上面放置一个形象，需要准确地放置306px从顶部和852px从左边的原始图像。 但是，图像需要随着纵横比的变化进行缩放，因为另一个图像是窗口宽度的 100%。

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

Answer 1

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

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

小提琴便于调整大小： https : //jsfiddle.net/pdn2trju/1/

Answer 3

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