How to fill a circle with an image with css and html?

Question

For some reason, my image is not filling out the entire circle. It's only a smaller version of the image that is showing in my circle. I need the image to fill out the entire circle. How can I do that?

<figure [ngStyle]="{ 'box-shadow': '0px 5px 5px 0px red'  }">
  <img [src]="'https://img2.androidappsapk.co/115/b/1/a/com.ludicside.mrsquare.png'" alt="resource.Name">
</figure>

My css

 figure { float: left; background: #f3f3f3; border-radius: 20px; font-size: 50px; text-align: center; margin-right: 10px; border-radius: 50%; /* display:inline-block; */ padding: 10px; height: 66px; width: 66px; box-shadow: 0px 5px 5px 0px blue; } figure img { display: block; height: auto; max-width: 100%; max-height: 100%; object-fit: cover; } * { -webkit-box-sizing: border-box; box-sizing: border-box; }

 <figure> <img src="https://img2.androidappsapk.co/115/b/1/a/com.ludicside.mrsquare.png" alt="resource.Name"> </figure>

Answer 1

Try this way by giving width: 100%; and overflow: hidden; to the parent.

 figure { background: #f3f3f3; border-radius: 50%; height: 66px; width: 66px; box-shadow: 0px 5px 5px 0px blue; overflow: hidden; } figure img { height: auto; width: 100%; } * { -webkit-box-sizing: border-box; box-sizing: border-box; }

 <figure> <img src="https://img2.androidappsapk.co/115/b/1/a/com.ludicside.mrsquare.png" alt="resource.Name"> </figure>