Div is not affected by css-CodePudding

I'm using html and css to make a website.

I made a div and assigned a class to it. I called that class profile_pic. And when I make changes in CSS to that class nothing changes. That div with a class is not being affected by CSS and I don't know why.

If I put the class in an img tag, then the changes will apply. But when I put the class back in that div, changes disappear. Can someone please explain what's happening?

.profile_pic {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 25px;
  display: inline-block;
}

<div >
  <img src="https://via.placeholder.com/100">
</div>

<div>
  <img  src="https://via.placeholder.com/100">
</div>

CodePudding user response：

The changes do apply. You can see this if you inspect the elements with your browser. The reason they don't seem to in the first example is because you aren't constraining the image to the div. If you do that with, for example, overflow: hidden, you then see that it works.

One minor issue is that since object-fit applies to "replaced elements" such as images, and not structural elements like divs, your image position is shifted in the first case. You could remedy this by applying width of 100% to the image.

.profile_pic {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 25px;
  display: inline-block;
  overflow: hidden;
}

.profile_pic img {
  max-width: 100%;
}

<div >
  <img src="https://via.placeholder.com/100">
</div>

<div>
  <img  src="https://via.placeholder.com/100">
</div>

CodePudding user response：

Showing an alternative approach using clip-path:

.profile_pic {
  display: flex;
  width: 50px;
  height: 50px;
  clip-path: circle(25px);
}

<div >
  <img src="https://via.placeholder.com/100">
</div>