CODEWITHSUNDEEP
htmlcsscss-position
fotanus
fotanus

Reputation: 20116

How to resize to fit and center image in a position absolute div?

I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.

I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.

Since code worth more than words, check my fiddle example.

This is the code from the jsfiddle:

CSS:

.relative {
    width: 400px;
    height: 400px;
    position: relative;

    <!-- Next is not important, only to display better -->
    display: block;
    background-color: green;
    border: 3px solid yellow;
    margin-bottom: 10px;
}

.absolute {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: red;
}


img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

HTML:

<div class="relative">
    <div class="absolute">
        <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
    </div>
</div>

<div class="relative">
    <div class="absolute">
        <img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
    </div>
</div>

Upvotes: 1

Views: 8734

Answers (3)

Rudie
Rudie

Reputation: 53831

Only for semi-new browsers:

img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Absolutely position all the things!

transform still needs browser prefixes I hear. -webkit- works for me.

http://jsfiddle.net/rudiedirkx/G9Z7U/1/

Upvotes: 2

konghou
konghou

Reputation: 557

you may put the image to background instead of an img tag.

<div class="absolute">
    <img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>

.absolute {
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

however, if you can set a fixed height for the div, you can use this:

.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }

Upvotes: 2

shaithana
shaithana

Reputation: 2490

Maybe I did not understand the question…

.absolute {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: red;
    line-height:350px; //new
}
img {
    position:relative;
    display:inline-block; // new
    vertical-align:middle; // new
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Upvotes: 0

Related Questions