Bootstrap Col Divs - Always Equal Height

Viewed 193

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%;
     }
    }
   }
  }
1 Answers
Related