CODEWITHSUNDEEP
htmlcssinternet-explorer
Tariq Jawed
Tariq Jawed

Reputation: 55

Image center aligned vertically and horizontally with responsiveness

It is responsive on chrome, but IE 10 does not respond on image resize.

as well as if the image is bigger, then initially the max-width: 100% and max-height: 100% is not working...

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

Here is the fiddle.

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

Any help will be highly appreciated.

Upvotes: 0

Views: 642

Answers (2)

Lloyd Banks
Lloyd Banks

Reputation: 36659

Not sure if it's feasible or not, but you can use Bootstrap 3. Apply the class "img-responsive" and it'll behave as you want. Works in all browsers IE8 and above

Upvotes: 0

FuriousD
FuriousD

Reputation: 854

Try :

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

Upvotes: 1

Related Questions