html - Bootstrap Col Divs - 始终等高

Question

每个 div 都在获取我上传到 WordPress 的背景图片。我希望能够上传任何分辨率的图像以用作背景图像，同时使每个 div 保持相同的高度。

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(); ?>

萨斯/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%;
     }
    }
   }
  }

Answer 1

一种方法是将图像指定为空 div 上的背景并调整 div 的“padding-top”以获得所需的纵横比(例如:padding-top:56.25%；给出横向比例)。

这是一个使用 4 个不同尺寸图像的示例 fiddle :

<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/