从调整大小的图像的左侧和右侧删除空格答案

【问题标题】：Remove whitespace from left and right of resized image从调整大小的图像的左侧和右侧删除空格
【发布时间】：2021-03-06 08:46:38
【问题描述】：

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

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

https://jsfiddle.net/peL1a7vj/1/

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;
}

这类似于CSS object-fit: contain; is keeping original image width in layout，但我无法使用已接受答案中建议的方法修复它

【问题讨论】：

标签： html css flexbox object-fit

【解决方案1】：

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

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

您的愿望可以实现的唯一情况：当图像的父级与原始图像具有相同的高度/宽度比例时。因此，您必须根据图像的比例为容器设置高度和宽度。

【讨论】：