力WordPress的圖像具有儘管使用引導

我有一些代碼在WordPress的這樣的輸出圖像上傳尺寸相同的高度...力WordPress的圖像具有儘管使用引導

<div class="col-md-2"> 

<?php $image = get_field('artist_photo'); 
     if(!empty($image)): 
     // thumbnail 
     $size = 'medium'; 
     $thumb = $image['sizes'][ $size ]; 
     ?> 
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" class="img-responsive" /> 

</div> 

<?php endif; ?>

的問題是，所有的圖像具有不同的高度（以在原始上傳它們的比例}。

是否有可能讓他們有一個統一的高度，而其餘的響應？

來源

2016-03-29 lowercase

如果你解釋你要做的佈局，這將有所幫助。這將更容易提出一些可以實現您的目標的CSS。 – Greg

佈局如上 - Bootstrap 6列。每列中的圖像。目前，如果我上傳6張不同的圖片，則根據原始圖片的尺寸，它們都有不同的高度。我需要每一列中的每個圖像都有相匹配的高度。 – lowercase

這裏有兩種方法可以限制在CSS圖像的高度。

首先，您可以設置最大高度。因此，像：

.col-md-2 img { 
    display: block; 
    max-height: 300px; 
    width: auto; 
    height: auto; 
}

其次，您可以顯示圖像作爲背景圖像，然後使用background-size屬性來約束它。在您的標記使用顯示圖像：

<div class="image" style="background: url(<?php echo $thumb; ?>) no-repeat center;" />

和風格它像這樣：

.col-md-2 { 
    height: 300px; 
} 

.col-md-2 div.image { 
    height: 100%; 
    width: 25%; // for example, assuming you want 4 images per row 
    background-size: constrain; 
}

我不知道這將如何在引導的情況下工作，但選擇2可能是你的唯一選項，如果您無法爲圖像或其父級指定明確的高度。

細節中有更多的惡魔，具體細節取決於你的情況，但希望這是有幫助的。

來源

2016-03-29 00:45:48 Greg

感謝格雷格 - 試圖避免做它的背景圖像，但這似乎是最有效的方式。 – lowercase

力WordPress的圖像具有儘管使用引導

回答

相關問題