不使用css背景 只有1个div剪辑它 调整到最小宽度，保持正确的纵横比 从中心裁剪(垂直和水平，你可以调整顶部，左&变换)

如果你使用主题之类的，要小心，他们通常会声明img max-width为100%。你必须一个都不做。测试一下吧!

https://jsfiddle.net/o63u8sh4/

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

在阅读StackOverflow的答案后，我得到的简单解决方案是

.profilePosts div {

background: url("xyz");
background-size: contain;
background-repeat: no-repeat;
width: x;
height: y;

}

CSS解决方案没有JS和没有背景图像:

方法1“margin auto”(IE8+ -不是FF!):

div { 宽度:150 px; 身高:100 px; 位置:相对; 溢出:隐藏; ｝ div img { 位置:绝对的; 上图:0; 底部:0; 保证金:汽车; 宽度:100%; ｝ 原始:< p > < / p > <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> 包装:< p > < / p > < div > <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> < / div >

http://jsfiddle.net/5xjr05dt/

方法二“变换”(IE9+):

div { 宽度:150 px; 身高:100 px; 位置:相对; 溢出:隐藏; ｝ div img { 位置:绝对的; 宽度:100%; 上图:50%; -ms-transform: translateY (-50%); -webkit-transform: translateY (-50%); 变换:translateY (-50%); ｝ 原始:< p > < / p > <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> 包装:< p > < / p > < div > <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> < / div >

http://jsfiddle.net/5xjr05dt/1/

方法2可用于将图像置于固定宽度/高度的容器中。两者都可能溢出-如果图像比容器小，它仍然会居中。

http://jsfiddle.net/5xjr05dt/3/

方法三“双包装”(IE8+ -不是FF!)：

.outer{ width:150px; height:100px; margin: 200px auto; /* just for example */ border: 1px solid red; /* just for example */ /* overflow: hidden; */ /* TURN THIS ON */ position: relative; } .inner { border: 1px solid green; /* just for example */ position: absolute; top: 0; bottom: 0; margin: auto; display: table; left: 50%; } .inner img { display: block; border: 1px solid blue; /* just for example */ position: relative; right: 50%; opacity: .5; /* just for example */ } <div class="outer"> <div class="inner"> <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> </div> </div>

http://jsfiddle.net/5xjr05dt/5/

方法四“双包装双图像”(IE8+):

.outer{ width:150px; height:100px; margin: 200px auto; /* just for example */ border: 1px solid red; /* just for example */ /* overflow: hidden; */ /* TURN THIS ON */ position: relative; } .inner { border: 1px solid green; /* just for example */ position: absolute; top: 50%; bottom: 0; display: table; left: 50%; } .inner .real_image { display: block; border: 1px solid blue; /* just for example */ position: absolute; bottom: 50%; right: 50%; opacity: .5; /* just for example */ } .inner .placeholder_image{ opacity: 0.1; /* should be 0 */ } <div class="outer"> <div class="inner"> <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> <img class="placeholder_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> </div> </div>

http://jsfiddle.net/5xjr05dt/26/

方法1有稍微更好的支持-你必须设置图像的宽度或高度! 有了前缀，方法2也有不错的支持(从ie9起)-方法2在Opera mini上没有支持! 方法3使用两个包装器-可以溢出宽度和高度。 方法4使用双重图像(其中一个作为占位符)，这会带来一些额外的带宽开销，但更好的跨浏览器支持。

方法1和方法3似乎不适用于Firefox

唯一真正的方法是在你的图像周围有一个容器，并使用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/

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

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;
}

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

使用溢出容器:隐藏

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