如何获取多个图像以自动调整大小并保持居中在一个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屋！