如何让多个图像自动调整大小并保持在div中居中

Question

我正在尝试将多个大学徽标图像连续缩小，因为浏览器宽度变小并且不会溢出其容器div，就像我上面的蓝色图片一样。通过应用最大宽度和100％的高度，图片在其div内缩放。但徽标图像不会以相同的方式缩放并溢出div。

以下是一个实例：http://feroze.org/new-education/ - 尝试调整大小并查看我的意思

以下是徽标容器div灰色栏的css

#partners
  height 105px
  background-color #eee
  white-space nowrap
  width 100%

这里是应用于徽标图像本身的CSS

.logo-image
  vertical-align middle
  padding 13px
  max-width 100%
  display inline

如您所见，我将它们垂直对齐在灰色条中。但是当条形缩短时，我希望图像保持在div内并根据容器div调整大小。

任何帮助将不胜感激！感谢

Answer 1

不确定您已经获得了什么HTML，但如果图片分别包含在<div>或<li>内，那么您可以使用display: table;和display: table-cell来确保无论有多少张图片，它们都会正确地适合宽度。

body {
  margin: 0;
}

#partners {
  height: 105px;
  background-color: #eee;
  white-space: nowrap;
  width: 100%;
  display: table;
}

.logo-image {
  vertical-align: middle;
  padding: 13px;
  display: table-cell;
}

.logo-image img {
  max-width: 100%;
}

<div id="partners">
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
</div>

Working demo here

Answer 2

有三种方法可以做到这一点：

首先，您可以将最大宽度设置为100％/图像数量（在本例中为6）。 box-sizing是一个新的CSS属性，包含宽度内的填充。

所以你可以将填充设置为你想要的任何东西，但如果你将盒子大小设置为border-box和硬编码宽度，宽度将永远不会改变（当然，除非你有溢出）。

box-sizing: border-box;
max-width: 16%;

其次，您可以使用新的CSS函数calc（）。我们减去26px，因为每侧有13px的填充。

max-width: calc(100% / 6 - 26px);

最后，您可以使用calc（）和box-sizing，从而无需减去26px。

box-sizing: border-box;
max-width: calc(100% / 6);