Untuk beberapa alasan, gambar saya tidak memenuhi seluruh lingkaran. Ini hanya versi kecil dari gambar yang ditampilkan di lingkaran saya. Saya membutuhkan gambar untuk mengisi seluruh lingkaran. Bagaimana saya bisa melakukannya?

<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>

Css saya

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>
1
Terrance Jackson 22 Oktober 2019, 01:31

1 menjawab

Jawaban Terbaik

Coba cara ini dengan memberikan width: 100%; dan overflow: hidden; kepada induknya.

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>
1
Nidhin Joseph 21 Oktober 2019, 22:42