Как разместить div с шириной, высотой поверх содержимого фона?

Question

У меня есть фоновое изображение (машина), и я хочу, чтобы оно было отзывчивым, чтобы фон становился максимально большим во всех разрешениях.Мне удалось сделать это, установив для background-size значение contain.

Но мне также нужно разместить элемент div поверх определенной области на этом изображении. Я хочу, чтобы элемент div перекрывал лобовое стекло автомобиля.

Проблема в том, что я не знаю, как рассчитать, где будет находиться лобовое стекло из-за contain.

Есть ли способ предсказать, где будет фон?Как я могу покрыть ветровое стекло с помощью div?

Если это невозможно, будет ли какая-то альтернатива contain, которая сделает изображение максимально большим, точно так же, как contain обрабатывает его?

Вот CodePen, который я создал для имитации моего сценария: https://codepen.io/brunolm/pen/bKdrGz

Answer 1

Сложность использования значения заключается в том, что он обрабатывает 2 различных сценария.Если соотношение сторон изображения шире, чем у контейнера, оно будет иметь высоту 100% и трудно рассчитать ширину.В противном случае ширина будет равна 100%.

Так что нам нужно по-разному обрабатывать две разные возможности.

К счастью, вы используете браузер на 100%, поэтомучто мы можем использовать медиа-запрос для соотношения сторон окна браузера.

Затем вычислите положение прямоугольника, используя соответствующие единицы просмотра.

Чтобы сделать изменение медиа-запроса видимым,Я также изменил цвет div

html, body, .bg {
  width: 100%;
  height: 100%;
  margin:  0;
}
.bg {
  background: url('https://thumbs.dreamstime.com/b/black-white-d-car-nissan-skyline-46715732.jpg') no-repeat;
  background-position: center;
  background-size: contain;
}
.area {
  background: rgba(200, 200, 200, .5);
 
  position: absolute;
  position: absolute;

  top: calc(50% - 43vh);
  height: 26vh;
  left: calc(50% - 54vh);
  width: 110vh;
}


/* portrait mode */
@media screen and (max-aspect-ratio: 8/5) { 
  .area {
      background-color: rgba(200,0,0,0.5);
      top: calc(50% - 28vw);
      height: 17vw;
      left: 14vw;
      width: 71vw;
  }
}

<div>current screen size: <span id="w"></span></div>

<div class="bg">
  <div class="area"><!-- should cover windshield at all times --></div>
</div>

Answer 2

Вам нужно добавить img и область div в один и тот же контейнер.Затем используйте проценты, чтобы правильно расположить их внутри контейнера.Используя проценты в контейнере, при изменении размера контейнера положение элементов должно оставаться на одном и том же месте, поскольку они будут реагировать по отношению к контейнеру, а не к странице:

html, body {
  width: 100%;
  height: 100%;
}
.car {
  width: 50%;
  display: block;
  margin: 0 auto;
  position: relative;
}

.car img {
  width: 100%;
}
.area {
  width: 70%;
  height: 30%;
  background: rgba(200, 200, 200, .5);
  position: absolute;
  bottom: 0;
  right: 0;
  top: 5%;
  left: 50%;
  margin-left: -35%;
}

<div class="car">
  <img src="https://thumbs.dreamstime.com/b/black-white-d-car-nissan-skyline-46715732.jpg" />
  <div class="area"><!-- should cover windshield at all times --></div>
</div>

Я использую трюк, чтобы центрировать область div в контейнере.Вы даете div left: 50%, а затем устанавливаете отрицательное левое поле, равное half width.Так как ширина области div равна 70%, мы можем использовать left: 50%; margin-left: -35%; для ее центрирования.