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

Question

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

1. 水平和垂直居中。
2. 将图像自动缩放到视口(viewport)大小(保持宽高比并且不会垂直或水平溢出)。

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

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

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

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

Answer 1

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

Fiddle

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