Как вертикально центрировать изображения с динамической высотой внутри div фиксированной высоты?

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

Вот мой код js:

$(document).ready(function(){
        var elemst = document.getElementsByName("pictureDiv");
        var img = $('.x-simple img');
        var parentdiv = $('.x-simple');
        for (var i=0;i<elemst.length;i++)
        {
            var ph = parentdiv.height();
            var h = img.height();
            console.log('img height' + h);
            var mh = Math.ceil((ph - h) / 2);

            if(mh>0){
                $('.x-simple img').css('margin-top', mh);
            }
            else
            {
            $('.x-simple img').css('margin-top', 0);
            }
        }
        });

Мой HTML:

<div class="col-md-12">
<div class="col-md-3 col-xs-12 marg-bottom main-img-wrap">
    <div class="xoverlay x-simple" name="pictureDiv">
        <a href="#" target="_blank">
                <img class="x-img-main" src="pic1.jpg">
        </a>
    </div>
</div>
<div class="col-md-3 col-xs-12 marg-bottom main-img-wrap">
    <div class="xoverlay x-simple" name="pictureDiv">
        <a href="#" target="_blank">
                <img class="x-img-main" src="pic2.jpg">
        </a>
    </div>
</div>
<div class="col-md-3 col-xs-12 marg-bottom main-img-wrap">
    <div class="xoverlay x-simple" name="pictureDiv">
        <a href="#" target="_blank">
                <img class="x-img-main" src="pic3.jpg">
        </a>
    </div>
</div>
<div class="col-md-3 col-xs-12 marg-bottom main-img-wrap">
    <div class="xoverlay x-simple" name="pictureDiv">
        <a href="#" target="_blank">
                <img class="x-img-main" src="pic4.jpg">
        </a>
    </div>
</div>

The problem with my code is its giving me only one constant height of 473px if I do a console.log('img height' + h); which is the height of my first image. Also I can see "margin-top:0px" getting added in all my pictures irrespective of their different heights. Images with smaller heights also gets "margin-top:0px" added to it although it should not happen. Not sure where am I making mistake in my code.


javascript html jquery css
person Zee    schedule 23.05.2015    source источник
comment
Это также может быть полезно: stackoverflow.com/q/12284044/939986 (Как разделить страницу на 4 равные части?) без javascript.   -  person Santosh Kumar    schedule 23.05.2015

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать each() для итерации по ним

$(document).ready(function() {

  $('.x-simple').each(function() {
    var $this = $(this),
        $img = $this.find('.x-img-main'),
        ph = $this.height(),
        h = $img.height(),
        mh = Math.ceil((ph - h) / 2);
    if (mh > 0) {
      $img.css('margin-top', mh);
    } else {
      $img.css('margin-top', 0);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
  <div class="col-md-3 col-xs-12 marg-bottom main-img-wrap">
    <div class="xoverlay x-simple" name="pictureDiv">
      <a href="#" target="_blank">
        <img class="x-img-main" src="pic1.jpg">
      </a>
    </div>
  </div>
  <div class="col-md-3 col-xs-12 marg-bottom main-img-wrap">
    <div class="xoverlay x-simple" name="pictureDiv">
      <a href="#" target="_blank">
        <img class="x-img-main" src="pic2.jpg">
      </a>
    </div>
  </div>
  <div class="col-md-3 col-xs-12 marg-bottom main-img-wrap">
    <div class="xoverlay x-simple" name="pictureDiv">
      <a href="#" target="_blank">
        <img class="x-img-main" src="pic3.jpg">
      </a>
    </div>
  </div>
  <div class="col-md-3 col-xs-12 marg-bottom main-img-wrap">
    <div class="xoverlay x-simple" name="pictureDiv">
      <a href="#" target="_blank">
        <img class="x-img-main" src="pic4.jpg">
      </a>
    </div>
  </div>

person Pranav C Balan    schedule 23.05.2015
comment
Ааа, мне нужно добавить цикл foreach для зацикливания всех изображений. Спасибо @Pranav C Balan. Но один вопрос. Почему цикл for, который я использую, не сработал? - person Zee; 23.05.2015
comment
img.height() может всегда возвращать высоту первого изображения в первом div - person Pranav C Balan; 23.05.2015