Положение div прямо под изображением с неизвестной высотой с положением абсолютное / относительное

Question

У меня есть изображение, которое составляет 88% ширины области просмотра, поэтому его высота является динамической c. Мне нужно расположить мой .pricecontainermobile div прямо под изображением, чтобы он оставался прямо под ним независимо от области просмотра ... Я попытался настроить это с помощью позиции: абсолютная / относительная, но я не могу заставить ее работать так, как мне нужно изображение будет отцентрировано по вертикали (минус 46 пикселей) ... Я думаю, что это портит абсолютное / относительное ... Где я ошибаюсь?

ПРИМЕЧАНИЕ Это только для портретной ориентации ... пожалуйста, просмотрите код в этой ориентации, чтобы увидеть правильный стиль и тому подобное.

JSFiddle: https://jsfiddle.net/cz9hebg7/1/

Код:

 <div id="placement">
      <img src="images/" alt="."/>
      <div class="pricecontainermobile">
        <h1>TEST</h1>
        <h2>$ 30.00</h2>
      </div>
    </div>



.pricecontainermobile>h2 {
  text-align: center;
  font-size: 12px;
}

.pricecontainermobile>h1 {
  display: block;
  font-family: neue-haas-grotesk-text, sans-serif;
  color: white;
  font-weight: 500;
  font-style: normal;
  list-style: none;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  top: 0;
}

.pricecontainermobile {
  display: block;
  width: 100%;
  background: blue;
  position: absolute;
}
#placement {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 88%;
    margin-left: 6%;
    background: red;
}
#placement img {        
    width: 100%;
    height: auto;
    position: relative;
    top: calc(50% - 46px);
    transform: translateY(-50%); 
}

Answer 1

Если высота блока .pricecontainermobile фиксирована, вы можете поместить его вместе с img в контейнер, а затем поместить контейнер внутри #placement, а не img.

Так что я исправлены высоты h1 и h2 до 18px; Вы можете изменить это, если хотите. Также обратите внимание, что я использовал изображение-заполнитель для изображения.

.pricecontainermobile>h2 {
  text-align: center;
  font-size: 12px;
  line-height: 24px; /* new: fix height */
  margin: 0;
}

.pricecontainermobile>h1 {
  font-family: 'neue-haas-grotesk-text', sans-serif;
  color: white;
  font-weight: 500;
  font-style: normal;
  list-style: none;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  line-height: 24px; /* new: fix height */
  margin: 0;
}

.pricecontainermobile {
  display: block;
  width: 100%;
  background: blue;
  position: absolute;
  padding: 6px 0; /* new: correct header's margins */
}

#placement {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 88%;
  margin-left: 6%;
  background: red;
}

#placement .imgcontainer { /* new: moved from img */
  position: relative;
  top: calc(50% - 30px); /* corrected for height of header */
  transform: translateY(-50%);
}

#placement img {
  vertical-align:top;
  width: 100%;
  height: auto;
}

<div id="placement">
  <div class="imgcontainer">
    <img src="https://placehold.it/600x200" alt="." />
    <div class="pricecontainermobile">
      <h1>TEST</h1>
      <h2>$ 30.00</h2>
    </div>
  </div>
</div>