Bootstrap Col Divs - Always Equal Height

Question

Each div is fetching a background image that I've uploaded into WordPress. I want to be able to upload images with any resolution to use as background images, while keeping each div at an equal height.

HTML:

<?php get_header(); ?>

<div class="row portfolio-content">
  <?php if(  have_posts() ) : while (  have_posts() ) :  the_post(); ?>
    <div class="col-xs-12 col-sm-6 col-md-4 portfolio-item">
      <a href="#">
         <img src="<?php echo 
         wp_get_attachment_url(get_post_thumbnail_id()); ?>" alt="">
      </a>
    </div>
  <?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>

Sass/CSS:

 .portfolio-content{
  .portfolio-item{
    @include global-box-shadow;
    @include global-div-spacing;
    background: $white;
    text-align: center;
    padding: 2rem;
    a{
      position: relative;
      text-decoration: none;
      img{
       width: 100%;
     }
    }
   }
  }

Possible duplicate of [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — Rob, Jul 24 '17 at 11:25

nsathyendra · Answer 1 · 2017-07-24T11:35:11.513

One way is to specify the image as background on an empty div and adjust the div's "padding-top" to achieve the desired aspect ratio(example: padding-top: 56.25%; gives a landscape'ish ratio).

Here is an example fiddle using 4 images of different dimensions:

<div class="portfolio-grid">

    <a href="#" class="portfolio-item">
        <div class="wrapper">
            <!-- DP Image as Background -->
            <div class="dp" style="background: url('http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg') center center no-repeat; background-size: cover;"></div>
            <div class="details">
                <h2>Item Heading</h2>
            </div>
        </div>

    </a>

    <a href="#" class="portfolio-item">
        <div class="wrapper">
            <div class="dp" style="background: url('http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg') center center no-repeat; background-size: cover;"></div>
            <div class="details">
                <h2>Item Heading</h2>
            </div>
        </div>
    </a>

    <a href="#" class="portfolio-item">
        <div class="wrapper">
            <div class="dp" style="background: url('http://www.seoghostwriter.com/wp-content/themes/thesis_151/rotator/sample-4.jpg') center center no-repeat; background-size: cover;"></div>
            <div class="details">
                <h2>Item Heading</h2>
            </div>
        </div>
    </a>

    <a href="#" class="portfolio-item">
        <div class="wrapper">
            <div class="dp" style="background: url('http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample1_l.jpg') top center no-repeat; background-size: cover;"></div>
            <div class="details">
                <h2>Item Heading</h2>
            </div>
        </div>
    </a>

</div>

.portfolio-grid {
    .portfolio-item {
        display: block;
        text-decoration: none;
        float: left;
        width: 33.333333%;
        padding: 15px;
        font-family: Arial, sans-serif;
        .dp {
            display: block;
            padding-top: 56.25%;
        }
        .details {
            h2 {
                margin: 0 0 6px;
                font-size: 14px;
                color: #444;
            }
        }
        /* Control .portfolio-item's width on Various Screen Sizes */
        @media(max-width:767px) {
            width: 50%;
        }

        @media(max-width:479px) {
            width: 100%;
        }
        /* ------ */
    }
}

https://jsfiddle.net/zsrb1zj7/11/

Bootstrap Col Divs - Always Equal Height

1 Answers1