Относительное позиционирование на изображении полной ширины

Question

У меня есть фоновое изображение, которое естественно 1500x1062 с 100vw width и auto height.

Теперь мне нужно разместить изображение сверху, которое должно быть размещено точно 306px сверху и 852px слева от исходного изображения. Но изображение должно масштабироваться с изменением соотношения сторон, поскольку другое изображение составляет 100% ширины окна.

У меня болит голова, и я не уверен, как это сделать.

Answer 1

Вы пытались преобразовать px в vw/vh второго изображения? С одним элементом в px, а другой с видимым портом не будет хорошо работать с изменяющимися пропорциями.

Answer 2

Я думаю, что ключ состоит в том, чтобы установить положение сверху и ширину элемента в зависимости от ширины браузера, потому что это ширина браузера, которая определяет ширину изображения, и поскольку соотношение сторон не имеет значения, изменение т, он будет также решить высоту изображения:

.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

306 из 1500 составляет 20,4%. Попробуйте назначить left:20.4% меньшему изображению. Также u не сказал, что является исходной шириной меньшего изображения, просто назначьте его относительный процент для его ширины