html - 图像中心垂直和水平对齐，具有响应能力

Question

它对 chrome 有响应，但 IE 10 对图像大小调整没有响应。

如果图像更大，那么最初 max-width: 100% 和 max-height: 100% 不起作用...

HTML

<div class="wrapper">
    <div class="outer">
        <div class="imagewrap">
            <div class="imagefluid">
                <img src="http://upload.wikimedia.org/wikipedia/commons/5/53/Dallas-Reunion.jpg" style="max-height: 100%; max-width: 100%;" alt=""/>
            </div>
        </div>
    </div>
</div>

CSS

* {margin:0;padding:0}
html,body{height:100%}
.wrapper{
    height: 100%;
    width: 100%;
    display: table;
    vertical-align: middle;
}
.outer{
    display: table-cell;
    vertical-align: middle;
}
.imagewrap{
    position: relative;
    left: 50%;
    float: left;
}
.imagefluid{
    position: relative;
    text-align: right;
    left: -50%;
}

这是 fiddle 。

http://fiddle.jshell.net/a5mgS/4/

我们将不胜感激任何帮助。

Answer 1

尝试:

.imagewrap{
    width:100%;
    position:relative;
    left:50%;
    float:left;
}
.imagefluid{
    width:100%;
    position:relative;
    text-align:right;
    left:-50%;
}

.imagefluid img {
    width:100%;
    height:auto;
}