在一行图片中裁剪成最短的图片高度？

Question

在一行图片中裁剪成最短的图片高度？

3

是否可以在单行图像中将图像裁剪为最短高度？如果可以，这是否可以仅通过CSS完成?

以下是我想要实现的示例:

以下是我目前正在努力的代码:

.container {
  width: 100%;
  margin: 0 auto;
}

.row {
  width: 100%;
  background: black;
  display: flex;
  align-items: center;
  overflow: auto;
}

.row .item {
  width: 33.33333%;
}

.row img {
  display: block;
  object-fit: cover;
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="item">
      <img src="https://78.media.tumblr.com/708bb6dcdaf359fd2ea83d11a0b5b4b8/tumblr_oyslstg5xk1unhdoco3_r1_1280.jpg" />
    </div>
    <div class="item">
      <img src="https://78.media.tumblr.com/c49ef0b40483c35ad3b6898c0e037e11/tumblr_oyslstg5xk1unhdoco2_r1_1280.jpg" />
    </div>
    <div class="item">
      <img src="https://78.media.tumblr.com/737456a69c07da1a9a2784506f62dce9/tumblr_oyslstg5xk1unhdoco9_r1_1280.jpg" />
    </div>
  </div>
</div>

有任何解决方案或建议吗？

- nr159

2

你需要使用 JavaScript 或 jQuery 来定义最小高度。 - M0ns1f

@M0ns1f 谢谢，我需要哪种类型的函数才能实现这个？ - nr159

如果你知道最小宽度和高度，就可以使用CSS。 - Jonny

主要是最小尺寸的高度。 - Jonny

@Jonny 好的。我正在寻找一个起点，有什么资源吗？ - nr159

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Collin G. · Accepted Answer

如果您能在后端脚本中处理高度并在输出时设置容器的高度，最好使用JS来实现此功能。

无论如何，以下是一些JS代码，应该可以实现您想要的效果：

const items = [...document.querySelectorAll('.item')];
const row = document.querySelector('.row');

function normalizeImages(images, container) {
  const shortestItem = images.reduce((smallest, element) => {
    return element.clientHeight < smallest.clientHeight ? element : smallest;
  });

  container.style.height = `${shortestItem.clientHeight}px`;
}

normalizeImages(items, row);

window.addEventListener('resize', () => normalizeImages(items, row));

.container {
  width: 100%;
  margin: 0 auto;
}

.row {
  width: 100%;
  background: black;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.row .item {
  flex-basis: 33.33333%;
}

.row img {
  display: block;
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="item">
      <img src="https://78.media.tumblr.com/708bb6dcdaf359fd2ea83d11a0b5b4b8/tumblr_oyslstg5xk1unhdoco3_r1_1280.jpg" />
    </div>
    <div class="item">
      <img src="https://78.media.tumblr.com/c49ef0b40483c35ad3b6898c0e037e11/tumblr_oyslstg5xk1unhdoco2_r1_1280.jpg" />
    </div>
    <div class="item">
      <img src="https://78.media.tumblr.com/737456a69c07da1a9a2784506f62dce9/tumblr_oyslstg5xk1unhdoco9_r1_1280.jpg" />
    </div>
  </div>
</div>

请注意，少量的CSS已更改以隐藏在.row元素上的溢出。