Twitter bootstrap 引导行如何将不同宽度/高度的图像居中？

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

这是我的演示页面：

编辑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>

编辑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>

以下是截图：

编辑3：我尝试了javascript解决方案，但图像变大，不居中，div超出屏幕。

以下是截图：

以下是最终的HTML： **

---

提前感谢并致以最良好的问候。

您可以使用您的行div上的班级文本中心

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

工作区：

如果您希望将高度固定在某个数量上，您可以这样做：

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

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

---

我个人认为，在javascript中执行此操作，并在Resize上更新它是过分的。

您可以在

由于Bootstrap

.img Responsive

OOCSS类模式，您的所有图像都将响应。这意味着，如果你的专栏有足够的空间，你的文章将有真实的大小。在移动设备中，这些图像将水平居中，每个图像将显示到一条新线

但在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>

创建此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);

---

显示一些您已经尝试过的代码。@Leothelion示例html已添加。@KevinAndrid samle html已添加。@Leothelion实际上我希望边界具有固定的高度和宽度。这就是为什么我说我想我需要最大的图像高度和宽度。（最高高度为155px，最高宽度为127 px。）对于编辑3，这是因为您没有在图像上设置

.img responsive

类。我想，我至少会取消设置高度图像（）的抖动。

setHeightOnImages

的目标是在您想要的每个事件之后应用相同的行为。因此，如果您想一次调用此函数或多次写入

maintenantedsameheight

中的内容，您可以。但是为什么：）在调整大小时需要对函数进行去抖动的原因是，像这样，在调整大小时函数会被多次调用。但是在resize事件完成后调用该函数（对于性能）会更好。看看这张图片，可以直观地看到去盎司函数的作用：@Haeresis，我尝试过你的解决方案，但是图像变大了，没有居中。请在我的原始帖子上查看我的编辑3。

img responsive

允许您的图像永远不会比容器大。您必须附加该引导类，以允许它以

marginleft:auto

和

右边距：自动

。我在这里就是这么做的，或者也可以传递

显示：内联块

，以允许父

文本对齐：居中

工作。您的解决方案使图像变小。我想保留图像的原始大小。Idd您是对的。在这种情况下，您有两个选择：要么使用javascript，它会在您每次调整大小时运行，就像您演示的那样。或者，您可以在后端计算缩略图。如果缓存此计算结果，则只需在图像集更改时重新计算。@yeouuu实际上只有6个图像，不再有。@yeouuu是否有办法将图像放在一行中？请检查我的编辑。

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

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

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

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

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

.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%);
  }
}

/**
 * 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);