0

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

下面是我到目前为止所拥有的 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: contains; 在布局中保持原始图像宽度，但我无法使用接受的答案中建议的方法修复它

4

1 回答 1

1

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

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

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

于 2021-03-06T00:27:45.780 回答