<h4>SVG clip path</h4>
<svg class="svg-clipped-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <clipPath id="clip">
      <path d="M81.18,98.43a310.89,310.89,0,0,1-62.36,0c-8.38-.91-16.34-8.87-17.25-17.25a310.89,310.89,0,0,1,0-62.36c.91-8.38,8.87-16.34,17.25-17.25a310.89,310.89,0,0,1,62.36,0c8.38.91,16.34,8.87,17.25,17.25a310.89,310.89,0,0,1,0,62.36C97.52,89.56,89.56,97.52,81.18,98.43Z"/>
    </clipPath>
  </defs>
  <image xlink:href="https://images.unsplash.com/photo-1490650034439-fd184c3c86a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=90" height="100%" width="100%" preserveAspectRatio="xMinYMid slice" clip-path="url(#clip)"/>
</svg>

<!-- ===========================  -->
<hr>

<h4>CSS clip path</h4>
<svg class="svg-clip-path" xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0; pointer-events: none; z-index: -9999;" aria-hidden="true">
  <defs>
    <clipPath id="clip-css" clipPathUnits="objectBoundingBox">
      <path d="M.8118.9843a3.1089,3.1089,0,0,1-.6236,0A.2076.2076,0,0,1,.0157.8118a3.1089,3.1089,0,0,1,0-.6236A.2076.2076,0,0,1,.1882.0157a3.1089,3.1089,0,0,1,.6236,0A.2076.2076,0,0,1,.9843.1882a3.1089,3.1089,0,0,1,0,.6236A.2076.2076,0,0,1,.8118.9843Z"/>
    </clipPath>
  </defs>
</svg>

<figure class="css-clipped-image">
  <img src="https://images.unsplash.com/photo-1490650034439-fd184c3c86a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=90" alt="">
</figure>

.svg-clipped-image {
  display: block;
  width: 25%;
}

/* ==================== */

.css-clipped-image {
  width: 25%;
  position: relative;
  margin: 0;
  clip-path: url(#clip-css);
}

.css-clipped-image::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.css-clipped-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}