Center and crop image

According to http://stackoverflow.com/a/25064976/2040520

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<h1>Center and crop image</h1>

<div id="container">
    <div id="content">
        <img src="//dummyimage.com/600x200/0099cc/fff.png" />
    </div>
</div>

CSS

h1 {
    text-align: center;
}
div#container {
    background-color: black;
    height: 200px;
    width: 400px;
    margin: 50px auto;
    padding: 15px;
}
div#content {
    background-color: gray;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
img {
    left: 50%;
    position: relative;
    transform: translate(-50%, 0);
}