Object-fit: cover；拉伸父元素

Question

我正在为一个博客创建一个网格，并使用object-fill: cover裁剪图像，这样，无论图像的纵横比如何，它们看起来都是一样的。问题是，当我这样做时，图像中被裁剪的部分会拉伸父元素(一个div)，并移动相对照片下的标题。

以下是代码的简化版本：

​

<div class="parent">

      <img src="#" class="child" style="max-height: 190px; object-fit: cover;">
      <h2>Title</h2>
      
</div>

​

有没有办法解决这个问题，仍然使用object-fit，或者我应该使用另一种方法？

耽误您时间，实在对不起

编辑:这是它看起来是什么样子的图片。The problem

Answer 1

我得到的最简单的答案是把你的图片作为背景：

​

.parent {
  background-image: url("https://www.fillmurray.com/640/360");
  background-position: center;
}

<div class="parent">
  <h2>Title</h2>
</div>

​

在这里，我刚刚从html中删除了图像，并将其作为bg放在css中。你可以调整bg的属性，例如，我在这里使用了background-position来居中显示图像。

另一种解决方案是将图像的位置设置为absolute：

​

<div class="parent">

      <img src="#" class="child" style="max-height: 190px; object-fit: cover; position:absolute;">
      <h2>Title</h2>
      
</div>

​