Question

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

以及如果图像更大，那么最初的最大宽度：100％和最大高度：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及以上版本的所有浏览器

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

2 个答案: