试试这个:http://jsfiddle.net/D7E3E/4/

使用溢出容器:隐藏

编辑:@多米尼克·格林打败了我。

据我所知，有一个插件可以让这变得简单。

jQuery插件:自动转换<img>为背景样式

<img class="fill" src="image.jpg" alt="Fill Image"></img>

<script>
    $("img.fill").img2bg();
</script>

此外，这种方式也满足了可达性需求。因为这个插件不会从你的代码中删除你的<img>标签，屏幕阅读器仍然会告诉你ALT文本，而不是跳过它。

解决方案不需要图像作为背景，将自动调整大小而不被切断或扭曲。

另一种解决方案是将图像放在具有所需宽度和高度的容器中。使用此方法，您不必将图像设置为元素的背景图像。

然后你可以用img标签来做这件事，只需要在元素上设置max-width和max-height。

CSS:

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

.imgContainer img {
    max-width: 100%;
    max-height: 100%;
}

HTML:

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

现在，当你改变容器的大小时，图像将自动增长到最大，而不会超出边界或扭曲。

如果你想让图像垂直和水平居中，你可以改变容器css为:

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

这是一个JS小提琴http://jsfiddle.net/9kUYC/2/

唯一真正的方法是在你的图像周围有一个容器，并使用overflow:hidden:

HTML

<div class="container"><img src="ckk.jpg" /></div>

CSS

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

这是一个痛苦的CSS做什么你想要和居中图像，有一个快速修复jquery，如:

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/

你可以使用css属性object-fit。(“设置替换元素的内容，如<img>或<video>，应该如何调整大小以适应其容器。”)

.cover { object-fit:封面; 宽度:50 px; 身高:100 px; ｝ <img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

参见这里的例子

IE有一个polyfill: https://github.com/anselmh/object-fit

相关:object-position(指定元素内容在其框内的对齐方式)。

这将填充图像到特定的大小，而不拉伸或裁剪它

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
    object-fit:scale-down;
}