Bootstrap row如何將圖像以不同的寬度/高度居中？

Question

我有一個網頁。我想添加6個不同寬度和高度的圖像。我想把這些圖像放在邊界的邊界上，並且兩邊/邊界的邊距相等。我認爲我必須獲得最大的圖像寬度和高度，並設置給其他人。我不想在境外散佈圖片。

這是我的演示頁： http://s14.postimg.org/5mh3d728x/sample.png

編輯1：這裏是樣本HTML

<div class="row" style="padding-left: 40px;"> 
     <div class="col-md-1 thumbnailImage"> 
      <img src="img/bulutistan.jpg" style="width: 78px; padding-top: 11px; padding-bottom: 12px;"> 
     </div> 
     <div class="col-md-1 thumbnailImage"> 
      <img src="img/datamarket.jpg" style="width: 105px; padding-top: 32px; padding-bottom: 25px;"> 
     </div> 
     <div class="col-md-1 thumbnailImage"> 
      <img src="img/esq.jpg" style="width: 104px; padding-top: 15px; padding-bottom: 17px;"> 
     </div> 
     <div class="col-md-1 thumbnailImage"> 
      <img src="img/libelium.jpg" style="width: 103px; padding-bottom: 24px;"> 
     </div> 
     <div class="col-md-1 thumbnailImage"> 
      <img src="img/microsoft.jpg" style="width: 53px; padding-bottom: 8px;"> 
     </div> 
     <div class="col-md-1 thumbnailImage"> 
      <img src="img/turkcell.jpg" style="width: 102px; padding-top: 26px; padding-bottom: 27px;"> 
     </div> 
    </div> 

這裏是CSS：

.thumbnailImage { 
      border: 1px solid #ddd; 
      border-radius: 4px; 
      text-align: center; 
      padding-top: 7px; 
     } 

編輯2：如果我把它改成了下面，圖像越來越大。我想保持原始圖像的大小。

下面是HTML：

<div class="row text-center" style="padding-left: 30em;"> 
       <div class="col-md-1 thumbnailImage"> 
        <img src="images/bulutistan.png" > 
       </div> 
       <div class="col-md-1 thumbnailImage"> 
        <img src="images/datamarket.png" > 
       </div> 
       <div class="col-md-1 thumbnailImage"> 
        <img src="images/esq.png" > 
       </div> 
       <div class="col-md-1 thumbnailImage"> 
        <img src="images/libelium.png" > 
       </div> 
       <div class="col-md-1 thumbnailImage"> 
        <img src="images/microsoft.png" > 
       </div> 
       <div class="col-md-1 thumbnailImage"> 
        <img src="images/turkcell.png" > 
       </div> 
      </div> 

這裏是CSS：

.thumbnailImage { 
      border: 1px solid #ddd; 
      border-radius: 4px; 
      text-align: center; 
      padding: 7px; 
     } 
.thumbnailImage img { 
     max-width: 100%; 
     height: auto; 
     min-height: 150px; 
    } 

這裏是截圖：http://s21.postimg.org/gslnddahj/sample2.png

編輯3：我嘗試了JavaScript的解決方案，但圖像的獲取更大，不居中，div超過屏幕。

下面是截圖：http://s7.postimg.org/m7mxh36qj/sample3.png

這裏是最終的HTML： **

<div class="row"> 
       <div class="col-md-2 "> 
        <img src="images/bulutistan.png" class="img-responsive"> 
       </div> 
       <div class="col-md-2 "> 
        <img src="images/datamarket.png" class="img-responsive"> 
       </div> 
       <div class="col-md-2 "> 
        <img src="images/esq.png" class="img-responsive"> 
       </div> 
       <div class="col-md-2 "> 
        <img src="images/libelium.png" class="img-responsive"> 
       </div> 
       <div class="col-md-2 "> 
        <img src="images/microsoft.png" class="img-responsive"> 
       </div> 
       <div class="col-md-2 "> 
        <img src="images/turkcell.png" class="img-responsive"> 
       </div> 
      </div> 

**

編輯4：這是最終的標記和CSS。我想知道是否有辦法讓圖像適合一排。

樣品演示：http://s12.postimg.org/647dighkt/sample.png

HTML：

<div class="row equal" > 

       <div class="col-md-1 thumbnailImage imgc"> 
        <img src="images/bulutistan.png" > 
       </div> 
       <div class="col-md-1 thumbnailImage imgc"> 
        <img src="images/datamarket.png" > 
       </div> 
       <div class="col-md-1 thumbnailImage imgc"> 
        <img src="images/esq.png" > 
       </div> 
       <div class="col-md-1 thumbnailImage imgc"> 
        <img src="images/libelium.png" > 
       </div> 
       <div class="col-md-1 thumbnailImage imgc"> 
        <img src="images/microsoft.png" > 
       </div> 
       <div class="col-md-1 thumbnailImage imgc"> 
        <img src="images/turkcell.png" > 
       </div> 
      </div> 

CSS：

.equal, .equal > div[class*='col-'] { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    flex: 1 0 auto; 
} 
div.imgc img{ 
    display:block; 
    margin:auto; 
} 

預先感謝&問候。

Answer 1

您可以在行div上使用類文本中心。

<div class="row text-center" style="padding-left: 40px;"> 

和CSS：

.thumbnailImage img { 
     max-width: 100%; 
     height: auto; 
    } 

工作的jsfiddle：https://jsfiddle.net/gvpy9egs/1/

，如果你想固定在一定的高度，你可能只是做這樣的：

.thumbnailImage { 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 7px; 
} 

.thumbnailImage img { 
    max-width: 100%; 
    max-height: 25px; 
    min-height: 25px; 
} 

https://jsfiddle.net/gvpy9egs/3/

我個人認爲這是在javascript中做到這一點矯枉過正，並更新onresize。

Answer 2

上

• this Live Responsive Exemple

您的所有圖像將響應作爲感謝露出來引導.img-responsive OOCSS類模式你可以試試這個方法。如果你的專欄有足夠的空間，那麼這意味着真正的大小。在Mobile中，這些圖像將成爲橫向中心，並且每個圖像都將顯示爲一條新線。

但在992px以上（如您使用md Bootstrap設置），您需要應用該行爲，並且每個圖像將垂直居中放置在列中（並且每列將具有相同的高度）。

在此HTML：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-2"> 
     <img class="img-responsive" src="https://lh6.ggpht.com/SeHZRXds3ossNP6yOrniffP0m7LcfONuzuy4uHQGfe1PT9B0SXIlGP0vExImCo38MM0=w300"> 
    </div> 
    <div class="col-md-2"> 
     <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/1d/89/3e/1d893e8180f8b57988f4ffa1188bb015.jpg"> 
    </div> 
    <div class="col-md-2"> 
     <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/1d/89/3e/1d893e8180f8b57988f4ffa1188bb015.jpg"> 
    </div> 
    <div class="col-md-2"> 
     <img class="img-responsive" src="https://lh6.ggpht.com/SeHZRXds3ossNP6yOrniffP0m7LcfONuzuy4uHQGfe1PT9B0SXIlGP0vExImCo38MM0=w300"> 
    </div> 
    <div class="col-md-2"> 
     <img class="img-responsive" src="https://lh4.ggpht.com/RxProdoIP2t3XhpSjNlJix9rL23mKTA7APWYoV-D9W3wLXP3S4jiM7X4Z5_M5gVA31k=h900"> 
    </div> 
    <div class="col-md-2"> 
     <img class="img-responsive" src="https://lh4.ggpht.com/RxProdoIP2t3XhpSjNlJix9rL23mKTA7APWYoV-D9W3wLXP3S4jiM7X4Z5_M5gVA31k=h900"> 
    </div> 
    </div> 
</div> 

這個CSS：

.col-md-2 { 
    position: relative; 
    border: 1px solid #f00; 
} 

.img-responsive { 
    margin-left: auto; 
    margin-right: auto; 
} 

@media (min-width: 992px) { 
    .img-responsive { 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    } 
} 

創建這個JavaScript函數：

/** 
* Maintain the height of all object in htmlCollection. 
* @function maintainedSameHeight 
* @param {HTMLCollection} htmlCollection - All HTMLElement need to kept the same height. 
* @param {string}   mediaQueries - Under what responsive condition the calcul is apply. 
*/ 
function maintainedSameHeight(htmlCollection, mediaQueries) { 
    var maxHeight = 0; 

    [].forEach.call(htmlCollection, function(htmlElement) { 
    htmlElement.style.height = ""; 
    maxHeight = (htmlElement.offsetHeight > maxHeight) ? htmlElement.offsetHeight : maxHeight; 
    }); 

    if (!mediaQueries || window.matchMedia(mediaQueries).matches) { 
    [].forEach.call(htmlCollection, function(htmlElement) { 
     htmlElement.style.height = maxHeight + "px"; 
    }); 
    } 
}; 

，並將其應用：

/* Create a function to apply on the `.col-md-1` already in the DOM the previous created function. */ 
function setHeightOnImages() { 
    maintainedSameHeight(
     // Target all column you want inspect to find the most height. 
     document.querySelectorAll(".col-md-2"), 
     // Because under 992px, you will be have one column, there are no necessity to maintain same height in this case. 
     "(min-width: 992px)" 
); 
} 

/* Apply at first time. */ 
window.addEventListener("load", setHeightOnImages); 
/* And update in case of Responsive. */ 
window.addEventListener("resize", setHeightOnImages);