<div class="container">
  <div class="crop">
    <img src="https://www.lego.com/cdn/cs/set/assets/blt167d8e20620e4817/DC_-_Character_-_Details_-_Sidekick-Standard_-_Batman.jpg" alt="" />
  </div>
</div>
.container {
  background: #fff;
  border: 1px solid #000;
  padding: 3px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 20px;
}
.crop {
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
img {
  display: block;
  height: 100%;
  position: absolute;
  margin: auto;
  top: -100%;
  right: -100%;
  bottom: -100%;
  left: -100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.