Q:

How to crop image within a circle div in css?

Hi there, I want to crop the image within a div that is divided into two parts in a circle. One side is half cropped pic and the other side is just background color with the name on it. I am currently using following code :
width: 220px;
userdp {
    height: 220px;
    border: 4px solid red;
    border-radius: 50%;
    position: relative;
    object-fit: none;
}

A:

If your image is inside the div element that you're applying that styling to as below you should just need to add overflow: hidden to the CSS.
<div class="userdp">
  <img src="..." />
</div>

And the styling.
.userdp {
  height: 220px;
  width: 220px;
  border-radius: 50%;
  overflow: hidden;
}

I've created an example here for you:
https://jsfiddle.net/20g4uL0j/1/

