Centre an image within a div when filling 100% width and height

Question

I am trying to centre an img within a containing div , where the img fills (minimum) 100% of the width and height of that containing div , meaning thta the image automatically scales to maintain image ratio. It is easy for me to align that img to the top, bottom, left or right, but I am hoping to centre the img both vertically and horizontally. I have been unable to locate the solution thus far, so any help greatly appreciated.

HTML

<section id="hero-image">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>

CSS

#hero-image {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: red;
}

#hero-image img {
    position: absolute;
    min-height: 100%;
    height: auto;
    min-width: 100%;
    width: auto;
    margin: auto;
    right: 0;
    left: 0;
    top: 0;
    z-index: 0;
}

Fiddle

Answer 1

Use transform:translateX(-50) to manage this (but CSS3), large screen or small screen the image will always stay center and keep his ratio aspect.

Here the fiddle

Otherwise if you want something more cross browser you will probably need a bit of javascript, but I may be wrong.

Answer 2

If you're happy with CSS3 (not supported in some older browsers) you could do this:

#hero-image img {
    position: absolute;
    min-height: 100%;
    height: auto;
    min-width: 100%;
    width: auto;
    margin: auto;
    left: 50%;
    top: 50%;
    z-index: 0;
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
}

 #hero-image { position: relative; width: 600px; height: 400px; overflow: hidden; background: red; } #hero-image img { position: absolute; min-height: 100%; height: auto; min-width: 100%; width: auto; margin: auto; left: 50%; top: 50%; z-index: 0; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } 

 <section id="hero-image"> <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg"> </section> 

Answer 3

Could you not set the hero image as a background? This will allow for more flexibilty both in terms of positioning and image size.

<section class="hero-image" style="background-image:url('https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg');">
</section>

.hero-image {
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

This achieves what you've set out to do exactly. There's other benefits to this method too, for instance, responsive images.

The CSS above sets the properties for any background image within a div class of hero-image. All you need to do then, is inline the background-image itself.

NOTE: If this doesn't have to be CMS driven, you can simply apply the image to the class rather than have it inline.

Answer 4

You can try this:

CSS

#hero-image {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: red;
}

#hero-image img {
    position: absolute;
    display:block;
    height: auto;
    margin: 0 auto;
    top: 0;
    z-index: 0;
    min-height:100%;
    width:100%;
    left: -50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);

}

HTML

 <section id="hero-image">
        <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
    </section>

DEMO HERE

Answer 5

You could also just set it as a background with background-size: cover . Like this: https://jsfiddle.net/wzjzjsdp/2/

.img1, .img2 {
    height: 400px;
    width: 300px;
    background-image:url(http://placehold.it/350x150);
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    display:inline-block;
}
.img2 {
    width:500px;
    height:400px;
}

<div class="img1"></div>
<div class="img2" style="background-image:url(http://placehold.it/350x250"></div>

EDIT: You can use inline style.