Html 如何让多个图像自动调整大小并在 div 中保持居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19896626/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get multiple images to auto resize and stay centered within a div
提问by Nearpoint
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.
我试图让多个大学徽标图像连续缩小，因为浏览器宽度变小并且不会溢出其容器 div，就像我对上面的蓝色图片所做的那样。通过应用 100% 的最大宽度和高度，图片在其 div 内缩放。但是徽标图像不会以相同的方式缩放并溢出 div。
Here is a live example: http://feroze.org/new-education/- try resizing and see what I mean
这是一个活生生的例子：http: //feroze.org/new-education/- 尝试调整大小，看看我的意思
Here is the css for the logos container div gray bar
这是徽标容器 div 灰色条的 css
#partners
height 105px
background-color #eee
white-space nowrap
width 100%
and here is the css applied to the logo images themselves
这是应用于徽标图像本身的 css
.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.
如您所见，我在灰色条中垂直对齐它们。但是随着栏缩短，我希望图像留在 div 内并根据容器 div 调整大小。
Any help would be greatly appreciated! Thanks
任何帮助将不胜感激！谢谢
回答by davidpauljunior
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-cellto ensure that no matter how many images, they'll always fit the width correctly.
不确定您已经拥有什么 HTML，但是如果每个图像都包裹在一个<div>or 中，<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>回答by Sheng Slogar
There are three ways to do this:
有三种方法可以做到这一点：
First, you can set the max-width to 100%/number of images (in this case six). box-sizing is a new CSS attribute that contains the padding inside the width.
首先，您可以将最大宽度设置为 100%/图像数量（在本例中为 6）。box-sizing 是一个新的 CSS 属性，它包含宽度内的填充。
So you can set the padding to whatever you want, but if you have box-sizing set to border-box and a hard-coded width, the width will never change (unless you have overflow, of course).
因此，您可以将填充设置为您想要的任何值，但是如果您将 box-sizing 设置为 border-box 和硬编码宽度，则宽度将永远不会改变（当然，除非您有溢出）。
box-sizing: border-box;
max-width: 16%;
Second, you can use the new CSS function calc(). We subtract 26px because of the 13px of padding on each side.
其次，您可以使用新的 CSS 函数 calc()。我们减去 26 像素，因为每边有 13 像素的填充。
max-width: calc(100% / 6 - 26px);
Lastly, you can use calc() and box-sizing, preventing the need to subtract 26px.
最后，您可以使用 calc() 和 box-sizing，防止需要减去 26px。
box-sizing: border-box;
max-width: calc(100% / 6);
