<div class="container">
  <div class="half-info">
    <div class="half-left">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum dicta expedita! Omnis molestias animi, reprehenderit rem natus, temporibus impedit, dolores numquam velit tempore accusantium voluptatibus, beatae excepturi illum? Fugit!</p>
    </div>
    <div class="half-right">
      <div class="half-img">
        <div class="bg-stretch">
          <img src="http://placehold.it/1200x300">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus repudiandae voluptatibus voluptates. Veniam corrupti voluptatum facilis cum ea quae neque ipsam saepe laboriosam vel iste, quidem dolor amet, sequi dignissimos.</p>
  <p>
    <img src="http://placehold.it/1900x300">
  </p>
</div>

// Container
$container-width: 1280px;
$container-pading-left: 15px;
$container-pading-right: $container-pading-left;
$container-width-full: $container-width + $container-pading-left +
  $container-pading-right;
$left-block-pading-right: 30px;
.half-info {
  display: flex;


  .bg-stretch {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;

    img {
      width: 100%;
      max-width: none;
      height: 100%;
      object-fit: cover;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.half-left {
  width: 230px;
  text-align: left;
  padding-right: $left-block-pading-right;

}

.half-right {
  flex-grow: 1;
  text-align: left;
  margin-right: calc((100vw - #{$container-width-full} - #{$left-block-pading-right}) / -2);
}

.half-img {
  min-height: 300px;
  position: relative;
  
}

.container {
  max-width: $container-width-full;
  width: 100%;
  margin: 0 auto;
  padding-left: $container-pading-left;
  padding-right: $container-pading-right;
}
img {
  max-width: 100%;
}