center image in div

center image in div

- 1
the image uses the full width or full height of the div
we always see all the image, nothing is cropped
<div class="container"></div>
.container {
    width: 500px;
    height: 300px;
    border: 1px solid black;
    background-image: url("http://placehold.it/200x400");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

- 2
the image always covers completely the div by using full width and height.
image is cropped and center vertically or horizontally
http://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-not-stretch

<div class="container"></div>
.container {
    width: 500px;
    height: 300px;
    border: 1px solid black;
    background-image: url("http://placehold.it/200x400");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}