Question

我的背景图片自然为1500x1062，其中100vw width和auto height。

现在，我需要在顶部放置一张图像，该图片需要从原始图像的左上角306px正确放置852px。但是，图像需要随着宽高比的变化而缩放，因为另一幅图像是窗口宽度的100％。

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

Answer 1

您是否尝试将px转换为第二张图像的vw / vh？ px中的一个元素和视图端口中的另一个元素在改变宽高比时效果不佳。

Answer 2

我认为关键是根据浏览器的宽度设置元素的顶部和宽度，因为它是决定图像宽度的浏览器宽度，因为方面比率不会改变，它也会决定图像的高度：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

轻松调整大小：https://jsfiddle.net/pdn2trju/1/

Answer 3

1500分中有306分是20.4％。尝试将left:20.4%分配给较小的图像。另外你没有说明较小图像的原始宽度是什么，只需为其宽度指定相对百分比

全宽图像上的相对定位

3 个答案: