Html 如何从不同大小的图片中获得完全相同宽度的墙&；身高？

我正在尝试创建一个由房屋照片组成的图像墙。
问题是：它们都有不同的高度和宽度
那么，如何使用css使所有图像看起来大小相同呢
这是我真正的css！这样，它们的宽度相同，但高度不同：

.property-thumb-info, .property-thumb-info-image, .pgl-team-item .img-thumbnail-medium {
  overflow: hidden;
  position: relative;
}

.property-thumb-info-image img, .pgl-team-item .img-thumbnail-medium img {
  width: -webkit-calc(100% + 50px);
  width: calc(100% + 50px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px, 0, 0) scale(1.1);
  transform: translate3d(-10px, 0, 0) scale(1.1);
}

.pgl-property:hover .property-thumb-info-image img, .pgl-team-item:hover .img-thumbnail-medium img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -webkit-transform: translate3d(0, 0, 0) scale(1.1);
  transform: translate3d(0, 0, 0) scale(1.1);
}

这是我的html代码：

<div class="col-xs-6 col-md-3 animation">
  <div class="pgl-property">
    <div class="property-thumb-info">
      <div class="property-thumb-info-image" style="">
        <img alt="" class="img-responsive" src="aze.png">
      </div>
    </div>
  </div>
</div>

---

对象匹配：封面应该可以

使所有
img
元素大小相同，然后：

.property-thumb-info-image img, .pgl-team-item .img-thumbnail-medium img 
{
   /* your code */
   object-fit: cover;
   /* your code */
}

设置图像的
max width
和
max height
属性。这取决于您的使用情况：是否要裁剪侧面，然后使图像100%高度，如果要拉伸图像，请键入witdth和height 100%@Steven最好的情况是在图片的中心进行裁剪，例如。我想保持比例和我的div的最大尺寸。这对我来说是新的，很抱歉@贝尔德斯丹·马克斯·海特为大的那个做了把戏，但不是小的那个！您似乎希望
像
背景图像一样使用
背景大小：封面。为什么不使用背景图像呢<代码>对象拟合
在IE中根本不支持，并且仅在v16以上版本的Edge中支持。请注意此方法的支持。请参阅@Andrei Gherghui对您的上述帖子的评论