CODEWITHSUNDEEP
cssimagecenter
Vinícius Barcelos
Vinícius Barcelos

Reputation: 401

Image in center position in determined height

I'm trying to position an image in determined height.

Just like this main image:

http://littlelines.com/

I have this:

HTML

<div class="present100">
<img id="imagem" src="teste.jpg" />
</div>

CSS

.present100 {
    width: 100%;
    height: 620px;
    background-color: #333;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    margin: auto;
}

#imagem {
    position: relative;
    width: 100%;
    min-width: 1300px;
    min-height: 100%;
}

I don't know how to center the image on resize just like the http://littlelines.com/

Upvotes: 1

Views: 77

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

Not sure why you have absolute position on the .present100 element, but you will have to absolutely position the image as well

#imagem {
    position: absolute;
    width: 100%;
    min-width: 1300px;
    min-height: 100%;

    left:50%;
    top:50%;

        -ms-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

Demo at http://jsfiddle.net/gaby/vMyvc/

Upvotes: 1

Related Questions