<div class="block">
  <div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quas deleniti, accusamus laudantium tempora nobis architecto blanditiis labore placeat adipisci dolorum? Blanditiis nobis eligendi iure expedita iste quas laudantium tenetur.
  </div>
  <div class="background">
    <img src="https://habrastorage.org/webt/1u/eg/hv/1ueghvvnvhzk_ocjmfm63mghtes.jpeg" alt="">
  </div>
</div>

.block {
  background: lime;
}
img {
  max-width: 100%;
  min-width: 0;
  width: 100%;
  
  vertical-align: top;
}
.content {
  background: #ccc;
}
@media (min-width: 480px) {
  .block {
    display: grid;
    grid-template-columns: repeat(2, 50%);
  }
}
@media (min-width: 600px) {
  .block {
    --width: 500px;
    display: grid;
    grid-template-columns: 1fr repeat(2, calc(var(--width) / 2)) 1fr;
  }
  .content {
    grid-column: 2 / 3;
  }
  .background {
    grid-column: 3 / 5;
  }
}
@media (min-width: 768px) {
  .block {
    --width: 700px;
  }
}
@media (min-width: 992px) {
  .block {
    --width: 900px;
  }
}
@media (min-width: 1280px) {
  .block {
    --width: 1200px;
  }
}