<div class="wrap">

  
  <ul class="list">


    <li class="item">
      <div class="item__img-wrap">
        <img class="item__img" src="https://hdfon.ru/wp-content/uploads/hdfon.ru-578920564-1024x640.jpg" alt="">
      </div>
      <h1 class="item__title">Заголовок поболее</h1>
    </li>


    <li class="item">
      <img class="item__img" src="https://hdfon.ru/wp-content/uploads/hdfon.ru-578920564-1024x640.jpg" alt="">
      <h1 class="item__title">Заголовок</h1>
    </li>


  </ul>


</div>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}


.wrap {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
}

.list {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 32px;
  margin-top: 32px;
  list-style-type: none;
}

.item {
  position: relative;
  display: flex;
  max-width: 100%;
  align-items: flex-start;
  background-color: yellow;
  outline: 8px solid pink;
}

.item__img-wrap {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: red;
  overflow: hidden;
}

.item__img-wrap .item__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item__img {
  max-width: 100%;
  height: auto;
/* Бесполезно выставлять. Она будет брать проценты от самой себя, а не от родителя */
}

.item__title {
  padding: 16px;
  color: green;
  white-space: nowrap;
}