<h2>SVG</h2>
<svg viewBox="0 0 800 500">
  <defs>
    <clipPath id="clip">
      <rect rx="250" width="100%" height="100%" transform="translate(400 250) rotate(-15 0 0) scale(0.85) translate(-400 -250)" />
    </clipPath>
  </defs>

  <image href="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#clip)"/>
</svg>

<hr><hr><hr>

<h2>CSS</h2>
<figure class="figure">
  <div class="clip">
    <img class="image" src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80" alt="">
  </div>
</figure>

.figure {
  margin: 0;
}

.clip {
  overflow: hidden;
  border-radius: 999px;
  transform: rotate(-15deg) scale(0.85); /* <------------------ */
}                                                          /* | */
                                                           /* | */
.image {                                                   /* | */
  display: block;                                          /* | */
  width: 100%;                                             /* | */
  transform: rotate(15deg) scale(1.1764); /* 1.1764 == 1 / 0.85 */ 
}