如何让多个图像自动调整大小并保持在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>

在这里工作演示.