如何用 css 和 html 的圖像填充圓圈？

Question

出於某種原因，我的圖像沒有填滿整個圓圈。 這只是我圈子中顯示的圖像的較小版本。 我需要圖像來填充整個圓圈。 我怎樣才能做到這一點？

<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

 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

通過給出width: 100%; 和overflow: hidden; 給父母。

 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>