如何将图像放入圆形div [重复]

Question

此问题已经在这里有了答案：

Responsive circle and image fit on circle（4个答案）

关闭8分钟前。

我尝试使用：

#circle 
{
     overflow:auto;
     width: 10%;
     padding-top: 10%;
     border-radius: 50%;
     background: red;
     border: 1px solid red; 
}

<div id="circle">
<img src="background.jpg" style="float: none; width:100%; height:auto;">
</div>

这似乎不起作用，并且div一直变成椭圆形，有关如何解决此问题的任何想法？结果如下：Image

Answer 1

#circle {
        overflow: hidden;
        width: 10%;
        background: red;
        
    }

    #circle img{
        height:100%;
        width:100%;
        top:0;
        left:0;
    }

    #circle, #circle img{
         border-radius: 50%;
    }

<div id="circle">
    <img src="https://images.freeimages.com/images/small-previews/c53/yellowstone-river-1361768.jpg" />
</div>