<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%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.