Вы пытались преобразовать px в vw / vh второго изображения? С одним элементом в px, а другой с видимым портом не будет хорошо работать с изменяющимися пропорциями.
У меня есть фоновое изображение, которое естественно 1500x1062с a 100vw widthи a auto height.
Теперь мне нужно разместить изображение сверху, которое нужно разместить точно 306pxсверху и 852pxслева от исходного изображения. Но изображение должно масштабироваться с изменением соотношения сторон, поскольку другое изображение составляет 100% ширины окна.
У меня болит голова, и я не знаю, как это сделать.
Я думаю, что ключ состоит в том, чтобы установить верхнюю позицию позиции и ширину элемента в зависимости от ширины браузера, потому что ширина браузера определяет ширину изображения, и поскольку соотношение сторон не изменяется, также будет определять высоту изображения:
.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/