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

clipboard.png

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

clipboard.png

  <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:问题解决,图片原因,图片上下有白边,感谢各位老铁啊~_~

阅读 5.2k
评论
    8 个回答
    • 577

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

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

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

          person.jpg图片纵横比不为1

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

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

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

                  • 2
                  • 新人请关照

                  把img铺满试试

                    撰写回答

                    登录后参与交流、获取后续更新提醒

                    相似问题
                    推荐文章