Javascript 使用CSS和/或JS动态裁剪（或遮罩？）所有图像到最短图像的高度？

所以我有一个电子商务环境中的产品网格，每个网格单元的高度由照片的高度决定。在网格中显示时，宽度总是相同的，但有些图片会更高

我正在尝试找出一种最简单的方法（除了手动裁剪之外）来动态确定某个类中最短照片的高度，然后将所有照片裁剪或遮罩到该高度

下面是一个关于代码外观的非常基本的示例。假设有一个CSS规则将类项的每个div设置为25%的宽度，并以内联方式显示。在这种情况下，像在我的例子中一样，长宽比不相等的图像将比它们的邻居高或短

<div class="row">
  <div class="item">
    <img src="..."/>
  </div>
  <div class="item">
    <img src="..."/>
  </div>
  <div class="item">
    <img src="..."/>
  </div>
  <div class="item">
    <img src="..."/>
  </div>
</div>

---

有几种方法可以做到这一点，您可以将图像绝对定位在相对定位的div中，也可以将div设置为图像的背景。如果您的图像大小千差万别，您可能希望使用“背景”方法。如果不是的话，你可能想绝对定位它们。什么对你最合适。以下是css示例：

.item{
  position:relative;
  padding-bottom:20%; /*padding-bottom for height*/
  overflow:hidden;
}
img{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width:100%;
}

/* background method properties */
.item{
  background-size:cover !Importqnt;
  background-position: center !Important;
}

然后，对于绝对定位，可以在示例中使用标记

<div class="row">
  <div class="item">
    <img src="..."/>
  </div>
  <div class="item">
    <img src="..."/>
  </div>
  <div class="item">
    <img src="..."/>
  </div>
  <div class="item">
    <img src="..."/>
  </div>
</div>

对于背景，可以为每个元素设置背景

<div class="item" style="background:url('...')"></div>

---

这是一把小提琴

嗨，我们需要一个代码示例。@MichaelCoker添加所有图像的结尾，对它们进行迭代，跟踪最短的，然后剪辑？