javascript - 使用 CSS 和/或 JS 动态裁剪(或屏蔽？)所有图像到最短图像的高度？

Question

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

我想找出最简单的方法(除了手动裁剪它们之外)来动态确定某个类别的最短照片的高度，然后将所有照片裁剪或蒙版到该高度？

这是一个非常基本的代码示例。想象一下，有一个 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>

Answer 1

有几种方法可以做到这一点，您可以将图像绝对定位在相对定位的 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>

这是一个 fiddle Fiddle Demo