从调整大小的图像的左侧和右侧删除空白

Question

我有一个固定高度的容器，我想在其中显示图像和标题。要求是图像应缩放以适应可用高度，同时保持纵横比。标题可以是可变高度。

下面是我目前所拥有的 JS fiddle。我无法让图像右侧和左侧的空白消失（我在 img 标签中添加了边框以显示我的意思）。是否可以删除多余的空格？

HTML

<div class="container">
  <div class="item">
    <img class="image" src="https://www.stockvault.net/data/2009/07/14/109489/thumb16.jpg"/>
    <div class="text">
      Caption 1
    </div>
  </div>
  <div class="item">
    <img class="image" src="https://images.unsplash.com/photo-1591870509558-26b7eee6d549"/>
    <div class="text">
      Caption 2
    </div>
  </div>
</div>

CSS

.container {
  height: 200px;
  flex: 1 1 auto;
  display: flex;
  flex-flow: row nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.item {
  display: flex;
  flex-direction: column;
}
.text {
  flex: 0 0 auto;
}
.image {
  flex: 1 1 auto;
  overflow: hidden;
  object-fit: contain;
  max-height: 100%;
  width: auto;
  border: solid;
}

这与类似，但我无法使用已接受答案中建议的方法修复它

Answer 1

“要求图像应缩放以适应可用高度，同时保持纵横比”- 这就是它在您的代码中所做的！如果你想拉伸宽度（“填充空白”），要么你会失去宽高比并得到一个扭曲的图像，或者 - 如果保持比例 - 图像的顶部和底部将被切断，因为它会由于宽度增加而增长。

没有其他解决办法：要么有一些空白，要么图像的一部分被截断，要么图像失真。除非您更改父容器的尺寸：

唯一可以满足你愿望的情况：当图片的parent与原图的比例相同时height/width。所以你必须根据图像的比例为容器设置高度和宽度。

从调整大小的图像的左侧和右侧删除空白

Remove whitespace from left and right of resized image

html

css

flexbox

object-fit