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

.profilePosts div {

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

}

增强了@afonsoduarte接受的答案。 以防你使用自举

---

There are three differences:

Providing width:100% on the style. This is helpful if you are using bootstrap and want the image to stretch all the available width. Specifying the height property is optional, You can remove/keep it as you need .cover { object-fit: cover; width: 100%; /*height: 300px; optional, you can remove it, but in my case it was good */ } By the way, there is NO need to provide the height and width attributes on the image element because they will be overridden by the style. so it is enough to write something like this. <img class="cover" src="url to img ..." />

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

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

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

然后你可以用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/

如果您想使用图像作为CSS背景，有一个优雅的解决方案。只需在背景大小CSS3属性中使用cover或include即可。

.container { 宽度:150 px; 身高:100 px; 背景图片:url(“http://i.stack.imgur.com/2OrtT.jpg”); background-size:封面; 平铺方式:不再重演; 背景位置:50% 50%; ｝ < div class = "容器" > < / div >

封面会给你一个放大的图像，包含会给你一个缩小的图像。两者都将保留像素长宽比。

http://jsfiddle.net/uTHqs/(使用封面)

http://jsfiddle.net/HZ2FT/(使用contains)

根据Thomas Fuchs的快速指南，这种方法的优点是对Retina显示器友好。

值得一提的是，浏览器对这两个属性的支持不包括IE6-8。