0

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/

どんな助けでも大歓迎です。

4

2 に答える 2

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;
}
于 2013-10-24T02:41:05.303 に答える
0

実現可能かどうかはわかりませんが、Bootstrap 3 を使用できます。「img-responsive」クラスを適用すると、希望どおりに動作します。IE8以降のすべてのブラウザで動作

于 2013-10-24T02:43:01.093 に答える