圆形头像显示的CSS，不管原图是比例什么样，一律控制为圆形

偶阵雨丿

于 2019-09-27 16:43:53 发布

阅读量619

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/gzy_0922/article/details/101543131

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

控制div为圆形，内部图片填充这个div即可

<div class="outSideDiv">
  <img class="imgClass" :src="Url"/>
</div>

     .outSideDiv{
          margin: auto;
          width: 50%;
          padding-top: 50%;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          position: relative;

          .imgClass {
            position: absolute;
            left: 0px;
            top: 0px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            width: 100%;
            height: 100%;
            z-Index: -1;
          }
       }