以最大宽度和最大高度为中心的超大图像

Question

我有一个img标签，它包含一个图像，需要缩小到最大宽度：200px或最大高度：200px，这取决于图像是高还是宽。我的当前代码：

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>

您将看到两个包含图像的容器。其中一个高，一个宽。我正在寻找一种在没有JavaScript的情况下组合这些代码的方法。

JSFiddle中的代码(http://jsfiddle.net/L9BnL/298/)

Answer 1

CSS目前无法检测图像的方向并根据该信息应用不同的规则。但是，如果您能够更改HTML并使用背景图像而不是img标记，则可以通过使用background-size: cover;轻松解决此问题。此外，所需的CSS总量要清晰得多。

请不要：这目前仅适用于Chrome和Opera，在Safari中有部分支持。Firefox和IE还不支持这个功能。看见http://caniuse.com/#search=cover了解更多信息

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