jquery - img 在不拉伸(stretch)的情况下填充其容器空间

Question

看看这个 fiddle :http://jsfiddle.net/5mneypc5/

它包含以下代码:

<style type="text/css">
.container {
    width: 400px;
    height: 200px;
    overflow: hidden;
    background: grey;
    margin-bottom: 10px;
}

#c-width {
    width: 350px;
}
#c-height {
    height: 150px;
}

.container > img {
    max-width: 100%;
    max-height: 100%;
}
</style>
<div class="container" id="c-width">
    <img src="http://lorempixel.com/500/250/cats/5">
</div>
<div class="container" id="c-height">
    <img src="http://lorempixel.com/500/250/cats/5">
</div>

是否可以让它充满整个容器空间而不被拉伸(stretch)？允许裁剪。

我尝试了 min-height, max-width 和 max-height, min-width 这两种情况，但每一种都只适用于我的一个容器。

纯CSS优先；但 JavaScript/jQuery 解决方案也受到欢迎。

Answer 1

使用背景图片代替 img 元素:

.container {
  background-image:url('../images/bg.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}