<div class="spacer"></div>
<div class="container">
  <div class="image">
    <img src="https://via.placeholder.com/1500x500">
  </div>
  <div class="content">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
 <div class="spacer"></div>

.spacer {
  height: 400px;
  background: pink;
}
.container {
  min-height: 500px;
  position: relative;
  display: flex;
  align-items: center;
  .content {
    margin-left: 100px;
    max-width: 503px;
    background: black;
    color: white;
    position: relative;
  }
  .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      min-width: 100%;
      min-height: 100%;
      width: auto;
      object-fit: cover;
    }
  }
}