如何将图像居中和自动缩放？答案

【问题标题】：How to both center and auto-scale an image?如何将图像居中和自动缩放？
【发布时间】：2012-03-09 03:16:44
【问题描述】：

可能是 CSS 布局最常见的两个问题：

单独来说，两者都有很好的解决方案：

在外部容器元素上使用 display: table，在内部容器元素上使用 display: table-cell、vertical-align: middle 和 text-align: center。
在img 元素上使用max-height: 100% 和max-width: 100%。

But combining both only does the centering，即使在 img 周围的所有元素上使用 height: 100% 和 width: 100%。

我怎样才能同时实现这两个目标而不屈服于硬编码的高度和宽度值或 JavaScript？

【问题讨论】：

【解决方案1】：

img {
    height: 100%;
    width: 100%;
}

基本上，图像需要占其容器大小的 100% 的高度和宽度。如果为容器设置不同的大小，它会更小。在小提琴中你可以很容易地看到它缩放到宽度，但由于小提琴的高度稍微固定，所以很难分辨。

【讨论】：

我怀疑 OP 希望保持原始图像的纵横比。
也许吧。很高兴知道。我假设这是针对移动设备等多种屏幕尺寸的。
只添加宽度 100%，然后比例将保持不变。 css-tricks.com/how-to-resizeable-background-image。或者，您可以使用 css3 background-sizing: cover/contain
@thepriebe, @Yannik Schall：width: 100% 图像垂直溢出窗口。

【解决方案2】：

我不是 100% 确定这一点，但是当您说任何事情的 100% 时，父级的尺寸必须是固定的，或者应该返回到固定的尺寸。尝试给出宽度：SOMEINTpx;高度：SOMEINTpx；在外容器中。

【讨论】：

【解决方案3】：

您可以将图像设置为背景并尝试以下操作：

background-position: center center;
background-size: cover; /*or contain*/

【讨论】：