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

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

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

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

html,css,image,math,position,

1

Ответов: 3


1

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


0

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

.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/


0

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

HTML, CSS, изображения, математика, должность,