增强了@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 ..." />

我觉得现在回答这个问题有点晚了。无论如何，希望这对将来的人们有所帮助。 我面临的问题，定位卡片的角度。有针对事件数组显示的卡片。如果事件的图像宽度对于卡片来说比较大，图像应该从两边裁剪，高度为100%来显示。如果图像高度较长，图像的底部被裁剪，宽度为100%。这是我的纯css解决方案:

HTML:

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}

如果您想使用图像作为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。

我帮助构建了一个名为Fillmore的jQuery插件，它在支持它的浏览器中处理背景大小:封面，并为那些不支持它的浏览器提供了一个垫片。看看吧!

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

使用溢出容器:隐藏

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

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

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

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