我觉得现在回答这个问题有点晚了。无论如何，希望这对将来的人们有所帮助。 我面临的问题，定位卡片的角度。有针对事件数组显示的卡片。如果事件的图像宽度对于卡片来说比较大，图像应该从两边裁剪，高度为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;
}

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

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

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

你可以通过“伸缩”显示来实现。对我来说!：

.avatar-img { display: flex; justify-content: center; align-items: stretch; border-radius: 50%; border: 1px solid #dee2e6; height: 5.5rem; width: 5.5rem; overflow: hidden; } .avatar-img > img { flex-grow: 1; object-fit: cover; } <div> <div class="avatar-img"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqczw3Fb_TYsj0hbPEy0u7Ay2bVq1KurD6hw&amp;usqp=CAU" alt="Test!'s profile photo"> </div> <div class="avatar-img"> <img src="https://i.pinimg.com/236x/a1/37/09/a137098873af3bf6180dd24cbe388ae9--flower-iphone-wallpaper-wallpapers-flowers.jpg" alt="Test!'s profile photo"> </div> </div>

不使用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%);
}

基于@Dominic Green使用jQuery的回答，这里有一个解决方案，应该适用于图像宽度大于它们的高度或高于它们的宽度。

http://jsfiddle.net/grZLR/4/

可能有一种更优雅的方式来处理JavaScript，但这确实有效。

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();

你必须在CSS中使用background-size: cover

JS代码

 <div>
   <div className={styles.banner}>banner</div>
 </div>

css代码

.banner{
  background: 
    url("./images/home-bg.jpg");
  background-size: cover;
  height: 53rem;
  width: 100%;
}

对象匹配不工作 Background-size: contains也不工作