如何让多个图像自动调整大小并在 div 中保持居中 [英] How to get multiple images to auto resize and stay centered within a div

问题描述

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

这是一个活生生的例子:.

I am trying to get the multiple university logo images in a row to scale down as the browser width gets smaller and not overflow its container div, just like I do with the blueish picture above. The picture scales within its div by applying max width and heigh of 100%. But the logo images do not scale in the same way and overflow the div.

Here is a live example: http://feroze.org/new-education/ - try resizing and see what I mean

Here is the css for the logos container div gray bar

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

and here is the css applied to the logo images themselves

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

As you can see I aligned them vertically in the grey bar. But as the bar shortens I want the images to stay within the div and resize according to the container div.

Any help would be greatly appreciated! Thanks

解决方案

Not sure what HTML you've already got, but if the images are each wrapped inside a <div> or <li> then you can use display: table; and display: table-cell to ensure that no matter how many images, they'll always fit the width correctly.

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.

这篇关于如何让多个图像自动调整大小并在 div 中保持居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！