Как установить динамическую высоту родительского (относительного) на основе высоты адаптивных изображений в абсолютном контейнере

Question

У меня есть относительный родительский элемент, который имеет несколько абсолютных дочерних элементов, которые обертывают и добавляют строки изображений внизу, когда экран становится меньше.Я хотел достичь высоты, которая изменяется в соответствии с высотой его дочернего элемента.Тем не менее, мой код JQuery продолжает добавлять значение друг на друга при изменении размера, что приводит к большому числу.Как мне добиться высоты, которая меняется при изменении размеров окна и просто получить последнее значение.

Попробовал записать его на консоль.Кажется, работает нормально.Тем не менее, я хотел просто получить последнее значение и присвоить ему высоту при изменении размера окна.

http://evertaste -lislam.ga / <--- Это веб-сайтя работаю с.Это галерея изображений на главной странице. </p>

$(window).resize(function () {
  var pgContHeight = $('.pg-container').height();
  var windowWidth = $(window).width();
  if (windowWidth >= 992) {
    pgContHeight *= 2; //<--Number of rows multiplied by height of image//
  } else if (windowWidth <= 991 && windowWidth >= 768) {
    pgContHeight *= 3;
  } else if (windowWidth <= 767 && windowWidth >= 601) {
    pgContHeight *= 4;
  } else if (windowWidth <= 600) {
    pgContHeight *= 8;
  }
  $('.photo-gallery-container').css('height', +pgContHeight + 'px');
})
$(window).trigger('resize');
})

.photo-gallery-container {
  position: relative;
  margin-top: 100px;
}

.photo-gallery-row-1 {
  display: flex;
  flex-flow: wrap;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.pg-container {
  width: 25%; //**Width changes via media queries**//
  position: relative;
}

.pg-container img {
  max-width: 100%;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photo-gallery-container">
  <div class="photo-gallery-row-1">  <!-- I have 3 of these positioned absolute -->
    <div class="pg-container">
      <div class="overlay"></div>
      <img src='//via.placeholder.com/350x150'>
    </div>
    <div class="pg-container">
      <div class="overlay"></div>
      <img src='//via.placeholder.com/350x150'>
    </div>
    <div class="pg-container">
      <div class="overlay"></div>
      <img src='//via.placeholder.com/350x150'>
    </div>
    <div class="pg-container">
      <div class="overlay"></div>
      <img src=//via.placeholder.com/350x150>
    </div>
    <div class="pg-container">
      <div class="overlay"></div>
      <img src='//via.placeholder.com/350x150'>
    </div>
  </div>
</div>

Answer 1

Этот вопрос усложнился из-за идеи о том, как подход был и как он должен работать в JS. Я обнаружил, что могу просто использовать data-filter и просто исключить идею использования абсолютного позиционирования при создании галерей изображений или галерей портфолио, подобных этой.

Answer 2

Я не уверен, чего вы пытаетесь достичь. Это галерея адаптивных изображений? Если это так, вам не обязательно использовать JavaScript для достижения своей цели. Знаете ли вы хитрости нижней прокладки? Это позволяет вам определить ширину, а затем высоту (через нижнюю часть отступа) с отношением к этой ширине (например, если вы хотите получить квадратные изображения, вам нужно соотношение 1/1, например, если ваша ширина равна 25%, тогда ваш отступ дно будет 25%) и т.д ... Я не нахожу здесь полезной javascript, но, возможно, ваше абсолютное позиционирование важно, поэтому я буду ждать некоторых разъяснений от вас. Надеюсь, я помог!

.photo-gallery-container {
    position: relative;
    margin-top:100px;
 }

.photo-gallery-row-1{
    display: flex;
    flex-flow:wrap;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: -1%;
 }

.pg-container { 
    margin: 1%;
    width: 23%;      
    height: 0;
    padding-bottom: 25%;
    position: relative;
    
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('//via.placeholder.com/350x150');
 }
 
 @media screen and (max-width:40rem) {
  .pg-container {
    width: 31%;
    padding-bottom: 31%;
  }
 }
 
 /*Etc....*/

<div class="photo-gallery-container">
  <div class="photo-gallery-row-1">
    <div class="pg-container">
       <div class="overlay"></div>
    </div>
    <div class="pg-container">
       <div class="overlay"></div>
    </div>
    <div class="pg-container">
       <div class="overlay"></div>
    </div>
    <div class="pg-container">
       <div class="overlay"></div>
    </div>
    <div class="pg-container">
       <div class="overlay"></div>
    </div>
  </div>
</div>