Подходящий объект: крышка; растягивает родительский элемент

Question

Я создаю сетку для блога и обрезал изображения с помощью object-fill: cover; чтобы они выглядели одинаково независимо от соотношения сторон изображения. Проблема в том, что когда я это делаю, обрезанная часть изображения растягивает родительский элемент (div) и перемещает заголовок, который находится под относительной фотографией.

Вот упрощенная версия кода:

<div class="parent">

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

Есть ли способ решить эту проблему, по-прежнему используя объектную подгонку, или мне следует использовать альтернативу?

Спасибо за ваше время

Edit: вот изображение того, как это выглядит. Проблема

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>