oversized image centering with max-width and max-height - css

Question

I have an img tag which contains an image and needs to be reduced to either max-width: 200px or max-height: 200px, which depends on whether the image is tall or wide. The current code I have:
CSS:
div#music_artwork {
position: relative;
width: 200px;
height:200px;
background:#eee;
}
.img-container {
position: relative;
overflow: hidden;
width:200px;
height:200px;
}
img {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
HTML:
<div id="music_artwork">
<div class="img-container">
<img class="first" src="http://entertainmentmv.nl/wp-content/uploads/2014/06/breaking-1.png">
</div>
</div>
You'll see two containers which contain images. One of them is tall, one of them is wide. I'm looking for a way to combine these codes, without JavaScript.
Code in JSFiddle (http://jsfiddle.net/L9BnL/298/
)

Answer 1

There is currently no way for CSS to detect orientation of an image and to apply different rules based on that information. However, if you are able to alter your HTML and use background-images instead of img tags, this can easily be resolved by using background-size: cover;. Also, the required total CSS is much clearer.
Please not: this currently works in Chrome and Opera, only, with partial support in Safari. Firefox and IE do not support that feature, yet. See http://caniuse.com/#search=cover for more information.
.img-container {
width: 200px;
height: 200px;
margin: 20px;
background-size: cover;
}
<div class="music_artwork">
<div class="img-container" style="background-image: url('http://entertainmentmv.nl/wp-content/uploads/2014/06/breaking-1.png');">
</div>
</div>
<div class="music_artwork" style="margin-top:20px;">
<div class="img-container" style="background-image: url('http://cdn1.sciencefiction.com/wp-content/uploads/2013/08/Bryan-Cranston.jpg');">
</div>
</div>