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

【问题标题】：Bootstrap row how to center images with different width/height?Bootstrap 行如何将不同宽度/高度的图像居中？
【发布时间】：2015-12-18 12:27:48
【问题描述】：

我有一个网页。我想连续添加 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;
}

在此先感谢并致以最诚挚的问候。

【问题讨论】：

显示一些你已经尝试过的代码。
@Leothelion 示例 html 添加。
@KevinAndrid 示例 html 添加。
@Leothelion 实际上我确实想为边框设置固定的高度和宽度。这就是为什么我说我想我需要最大的图像高度和宽度。（最高为 155 像素，最宽为 127 像素。）
对于您的编辑 3，我认为这是因为您没有在图像上设置 .img-responsive 类。

标签： twitter-bootstrap css twitter-bootstrap-3 image-size

【解决方案1】：

您可以在行 div 上使用类 text-center。

<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 中执行此操作并在调整大小时对其进行更新。

【讨论】：

您的解决方案使图像更小。我想保留图片的原始尺寸。
我想你是对的。在这种情况下，您有 2 个选项 imo。您可以使用每次调整大小时运行的 javascript，如 Haeresis 演示的那样。或者您可以在后端计算缩略图。如果缓存这个计算结果，只需要在图像集发生变化时重新计算即可。
@yeouuu 实际上只有 6 张图片，不会再多了。
@yeouuu 有没有办法将图像放在一行中？请检查我的编辑4。

【解决方案2】：

你可以试试这个方法暴露在

this Live Responsive Exemple

由于 Bootstrap .img-responsive OOCSS 类模式，您的所有图像都将是响应式的。如果您的列有足够的空间，这意味着将具有实际大小。在移动设备中，这些图像将水平居中，并且每张图像都将显示为新的一行。

但高于 992 像素（正如您使用 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);

【讨论】：

我至少会去抖动 setHeightOnImages()。减少对它的调用。
setHeightOnImages 的目标是在您想要的每个事件之后应用相同的行为。所以如果你想调用这个函数一次或者多次写maintainedSameHeight的内容都可以。但是为什么:)
你需要在调整大小时去抖动函数的原因是因为这样你的函数在调整大小时会被调用很多次。但是在调整大小事件完成后调用函数会更好（为了性能）。查看这个以直观表示去抖动函数的作用：drupalmotion.com/article/…
@Haeresis，我尝试了您的解决方案，但图像变得更大且不居中。请检查我在原始帖子上的编辑 3。
img-responsive 允许您的图像永远不会大于容器。您必须对该 Bootstrap 类进行附加，以使其以margin-left: auto; 和margin-right: auto 为中心。这就是我在这里所做的codepen.io/Haeresis/pen/NxNXLo 或者也可以传递display: inline-block 以允许父text-align: center 工作。跨度>