Bootstrap行如何以不同的宽度/高度居中图像？

Question

我有一个网页。我想连续添加6个不同宽度和高度的图像。我想将这些图像放在边框内，两边/边框的边距相等。我想我必须获得最大的图像宽度和高度，并设置为其他。我不想把图像展开到边境之外。

这是我的演示页面： http://s14.postimg.org/5mh3d728x/sample.png

EdiT 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;
        }

EdiT 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

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

**

EdiT 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;
}

提前致谢＆amp;最诚挚的问候。

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

感谢Bootstrap .img-responsive OOCSS Class Pattern，所有图片都会响应。如果您的列具有空间，那意味着将具有真实大小。在移动设备中，此图像将是水平中心，每个图像将显示为一个新行。

但是高于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);