CSS中clip-path裁剪图片后，如何让圆形尺寸适配div？

我有一张原始图片：

使用CSS的clip-path属性可以将图片裁剪为圆形，代码如下：

<!DOCTYPE html>
<html>
   <head>
      <style>
         #profile-pic {
            clip-path: circle(20% at 50% 50%);
            width: 100%;
         }
      </style>
   </head>
   <body>
      <img id="profile-pic" src="test.png" alt="Your Image">
   </body>
</html>

裁剪后的效果：

现在我想把裁剪后的圆形图片放入一个占屏幕50%宽度的div中，代码如下：

<!DOCTYPE html>
<html>
   <head>
      <style>
         #profile-pic {
            clip-path: circle(20% at 50% 50%);
            width: 100%;
         }
         div {
            width:50%;
            border: 10px solid black;
         }
      </style>
   </head>
   <body>
      <div>
         <img id="profile-pic" src="test.png" alt="Your Image">
      </div>
   </body>
</html>

实际渲染效果：

可以看到，图片仍保留原始尺寸，而非裁剪后圆形的尺寸。我希望仅使用clip-path中圆形的直径来填满div，精准控制边距，达到如下效果：

请问该如何实现？

clip-path仅裁剪视觉显示区域，不会改变元素本身的布局尺寸。要让圆形裁剪区域填满div，需要调整图片尺寸和裁剪参数配合，以下是两种可行方法：

方法一：调整图片布局与裁剪参数 #

把clip-path的圆形半径设为50%，同时让图片以正方形形式填充div，裁剪出的圆形就能刚好填满容器：

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 50%;
            border: 10px solid black;
            aspect-ratio: 1/1; /* 强制容器为正方形 */
            padding: 0;
            margin: 0;
         }
         #profile-pic {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保持图片比例，避免拉伸变形 */
            clip-path: circle(50% at 50% 50%);
         }
      </style>
   </head>
   <body>
      <div>
         <img id="profile-pic" src="test.png" alt="Your Image">
      </div>
   </body>
</html>

方法二：用div背景图实现 #

如果不需要单独的img元素，可以把图片设为div的背景，直接裁剪容器，布局尺寸就是圆形的实际尺寸：

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 50%;
            aspect-ratio: 1/1;
            border: 10px solid black;
            background: url(test.png) center/cover; /* 背景图居中铺满 */
            clip-path: circle(50%);
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

关键说明 #

• aspect-ratio: 1/1确保容器为正方形，让圆形能完全填满；
• object-fit: cover保证图片裁剪时保持原始比例，不会因拉伸变形；
• clip-path: circle(50%)从容器中心裁剪出最大的圆形，刚好匹配正方形容器尺寸。

内容的提问来源于stack exchange，提问作者user32882