<div class="wrap">
  <div class="block">
    <div class="img-block">
      <img src="https://images.unsplash.com/photo-1548681528-6a5c45b66b42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="">
    </div>
  </div>
   <div class="block">
    <div class="img-block">
      <img src="https://images.unsplash.com/photo-1561948955-570b270e7c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=259&q=80" alt="">
    </div>
  </div>
</div>

body {
  /* Math.tan(10/180*Math.PI) / 2 == 0.08816349035423249   */
  /*  height = 300px  */
  margin: 20px calc(300px * 0.08816349035423249);
}

.wrap {
  display: flex;
  justify-content: space-between;
  height: 300px;
}

.block {
  width: calc(50% - 2px);
  overflow: hidden;
  transform: skewX(-10deg);
}

.img-block {
  height: 100%;
  transform: skewX(10deg);
}

.block img {
  margin-left: calc(-300px * 0.08816349035423249);
  width: calc(300px * 0.17632698070846498 + 100%);
  height: 100%;
  display: block;

  object-fit: cover;
}