zui/src/less/controls/avatar.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

//
// Avatar
// --------------------------------------------------


// Base style

.avatar {
  display: block;
  overflow: hidden;
  width: @avatar-size;
  height: @avatar-size;
  line-height: @avatar-size;
  text-align: center;
  background-position: center;
  background-size: cover;
  border-radius: @border-radius-base;
  position: relative;

  img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  &.has-text {
    background-color: @color-secondary;
    color: #fff;
  }
}


// Avatar sizes

.avatar-sm {
  width: @avatar-size-sm;
  height: @avatar-size-sm;
  line-height: @avatar-size-sm;
  font-size: @font-size-small;
}

.avatar-lg {
  width: @avatar-size-lg;
  height: @avatar-size-lg;
  line-height: @avatar-size-lg;
  font-size: (@avatar-size-lg/2);

  > .icon {font-size: (@avatar-size-lg/2)}
}

.avatar-xl {
  width: @avatar-size-xl;
  height: @avatar-size-xl;
  line-height: @avatar-size-xl;
  font-size: (@avatar-size-xl/2);

  > .icon {font-size: (@avatar-size-xl/2)}
}

.avatar-circle {
  border-radius: 50%;
}