图像中心垂直和水平对齐，具有响应性答案

【问题标题】：Image center aligned vertically and horizontally with responsiveness图像中心垂直和水平对齐，具有响应性
【发布时间】：2013-10-24 02:10:44
【问题描述】：

它在 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/

我们将不胜感激。

【问题讨论】：

你想要fiddle.jshell.net/PYAA7这样的东西吗？
对于display: table，我认为您需要像表格一样构造元素，同时使用table row 和table cell。见：quirksmode.org/css/css2/display.html#table

标签： html css internet-explorer

【解决方案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;
}

【讨论】：

嗨，首先非常感谢，它解决了第一个问题，现在图像在 IE 中也是响应式的。

【解决方案2】：

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

【讨论】：