html - 如何在不使用背景的情况下使用 HTML 和 CSS3 创建响应式、垂直和水平居中的图像

Question

我的目标是使图像在其容器内垂直和水平居中，并且图像在不改变原始宽高比的情况下占据尽可能多的空间。

使用{背景大小:包含；背景位置:中心；背景重复:norepeat； } 不是一个选项，因为我需要将覆盖 div 附加到图像的一 Angular 。使用背景意味着包含的 div 不会精确地遵循图像大小。

下面是使用 flexbox 的尝试。不幸的是，它在 Firefox 中不起作用(至少在 Linux 上)。当容器的宽度大于给定高度的图像宽度时，Firefox 会拉伸(stretch)图像。 Flexbox attempt

这是另一种尝试，这次使用绝对定位 w/left: 50%;为了使第一个 div 居中并转换:translate(-50%, -50%) 为了使图像居中。结果是 Not Acceptable ，因为 image-wrapper div(带有绿色“olivedrab”边框)在 Firefox 上不在图像周围(垂直调整窗口大小时在 chrome 中也是如此)。这意味着不能将叠加层直接附加到图像上(并在调整大小时跟随)。 Left 50% + Translate attempt

注意:不需要 Javascript。

Answer 1

<style>
div {
    width: 400px;
    height: 400px;
    line-height: 400px;
    background-color: #cccccc;
    vertical-align: middle;
    position: relative;
    border: 1px solid black;
}

img {
    position: absolute; 
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    vertical-align: middle;
    width: auto;
    height: auto;
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
} 
</style>

在 IE9 和 FF 中测试。