适合对象：封面；拉伸父元素

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>