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%;
}

这是小提琴。

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;
}

Answer 2

不确定它是否可行，但您可以使用 Bootstrap 3。应用“img-responsive”类，它会按照您的意愿行事。适用于所有浏览器 IE8 及以上