CODEWITHSUNDEEP
htmlcss
Terrance Jackson
Terrance Jackson

Reputation: 1069

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

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>

Upvotes: 1

Views: 2315

Answers (1)

Nidhin Joseph
Nidhin Joseph

Reputation: 10237

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>

Upvotes: 1

Related Questions