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

Question

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

1. 水平和垂直居中。
2. 自动缩放图像到视口大小（保持纵横比，不垂直或水平溢出）。

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

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

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

如何在不屈服于硬编码的高度和宽度值或JavaScript的情况下同时实现两个目标？

Answer 1

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

Fiddle

基本上图像需要占据其容器大小的100％的高度和宽度。如果为容器设置不同的大小，它将更小。在小提琴中，您可以很容易地看到它按比例缩放到宽度，但由于小提琴的高度稍微固定一点，因此更难以辨别。

Answer 2

我不是100％肯定这一点，但当你说100％的任何东西时，父母的尺寸必须固定或应该回到固定的大小。尝试给出宽度：SOMEINTpx;高度：SOMEINTpx;在外容器中。

Answer 3

你可以像背景一样设置图像并试试这个：

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