img宽高一样，border-radius: 50%，为什么不是正圆？？？

Question

    <div>
        <img style="width: 60px;height:60px;border-radius: 50%" src="~@/asset/person.jpg">
    </div>
    

  <div>
        <img style="width: 60px;height:60px;border-radius: 50%;border: 1px solid red" src="~@/asset/person.jpg">
    </div>
    

img宽高一样，border-radius: 50%，为什么不是正圆？？？
老铁们， 这是什么问题？？

PS：现在就很郁闷了，width: 60px;height:60px设置后，img的宽高不一样，但是原图的大小是200*200，怎么肥事？css失效了？

PPS:问题解决，图片原因，图片上下有白边，感谢各位老铁啊~_~

Answer 1

原图大小是200*200，实际显示是这样说明这个图片上下是有边的....用ps什么的打开看看

Answer 2

图片是200x200并不代表你看到的图就是200*200的吧，其它的部分可能是白色或透明的。

Answer 3

<img width="60" height="60" style="border-radius: 50%" src="~@/asset/person.jpg">

Answer 4

person.jpg图片纵横比不为1

Answer 5

将图片的宽高设置成相同的值；border-radius:50%就可以

Answer 6

前几天也遇到这个问题，后来发现是图片的问题，有些图片上传后，可能处理出现问题，导致一些留白。
img设置宽高，的确可以拉伸图片。

Answer 7

很明显css是正圆，图片原因

Answer 8

把img铺满试试