Center image in div when filling 100% of width and height

Question

I am trying to center imginside the containing divwhere it imgfills (minimum) 100% of the width and height of the containing div, which means that the image is automatically scaled to maintain the image. It’s easy for me to compare this value imgwith the top, bottom, left, or right, but I hope to center imgboth vertically and horizontally. At the moment, I could not find a solution, so any help was highly 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

transform:translateX(-50) ( CSS3), , .

, - , , , javascript, .

Answer 2

CSS3 ( ), :

#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>

Hide result

Answer 3

background-size: cover. : 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: .

Answer 4

? , .

<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 provides what you intended to do for sure. There are other advantages to this method, such as responsive images.

The CSS above sets the properties for any background image in the div class of the image hero. All you have to do is inline background image.

NOTE. If this is not required to manage the CMS, you can simply apply the image to the class, rather than having it embedded.

Answer 5

You can try the following:

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