在单行图像中裁剪到最短图像高度？

Posted 2021-04-15

是否可以将图像裁剪为单行图像中图像的最短高度？如果是这样，这可以单独用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>

任何解决方案或建议？

答案

除非您可以在后端脚本上处理高度并在输出时在容器上设置高度，否则最好使用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>

以上是关于在单行图像中裁剪到最短图像高度？的主要内容，如果未能解决你的问题，请参考以下文章

Android图像视图顶部裁剪

在对象高度和宽度上裁剪二进制图像

JCrop 得到裁剪的宽度和高度

错误（？）codeigniter裁剪图像的高度和宽度已更改

在android中裁剪图像以适应宽度和截断高度

根据 img 标签中给出的高度宽度自动裁剪图像