5

我试图让多个大学徽标图像连续缩小，因为浏览器宽度变小并且不会溢出其容器 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 调整大小。

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

logo溢出截图

4

2 回答 2

16

不确定您已经拥有什么 HTML，但如果图像都包含在 a<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>

工作演示在这里。

于 2013-11-10T23:59:05.273 回答
3

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

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

因此，您可以将填充设置为您想要的任何内容，但是如果您将 box-sizing 设置为 border-box 和硬编码的宽度，则宽度将永远不会改变（当然，除非您有溢出）。

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

其次，您可以使用新的 CSS 函数 calc()。由于每边有 13px 的填充，我们减去了 26px。

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

最后，您可以使用 calc() 和 box-sizing，无需减去 26px。

box-sizing: border-box;
max-width: calc(100% / 6);
于 2013-11-11T00:17:02.477 回答