css - 最大宽度和最大高度的超大图像居中

Question

我有一个包含图像的 img 标签，需要将其缩小为 max-width: 200px 或 max-height: 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>