uniapp定义圆形头像

在uniapp中，可以使用以下代码定义一个圆形头像：

<template>
  <div class="avatar">
    <img :src="avatarUrl" alt="avatar" class="avatar-img">
  </div>
</template>

<style>
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
  }
  .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

<script>
  export default {
    data() {
      return {
        avatarUrl: 'https://example.com/avatar.png'
      }
    }
  }
</script>

在上面的代码中，我们使用了 `border-radius` 属性将 `div` 元素的边角设置为50%。这样，`div` 就变成了一个圆形，同时使用 `overflow: hidden` 属性将图像超出圆形部分的部分隐藏起来。最后，我们使用 `object-fit: cover` 属性将图像缩放以填充整个圆形区域。

相关问题

uniapp圆形头像

在Uniapp中实现圆形头像有几种方法，以下是其中两种常用的方法：

方法一：使用CSS样式
你可以在对应的组件的样式中使用CSS属性来实现圆形头像效果。例如，在`<image>`或`<img>`标签中，可以添加以下样式：

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

然后，在对应的组件中添加`class`属性并设置为`round-avatar`，即可实现圆形头像效果。

方法二：使用uni-avatar组件
Uniapp提供了一个名为`uni-avatar`的组件，可以方便地实现圆形头像效果。你可以在需要展示头像的地方使用该组件，并设置`shape`属性为`circle`，如下所示：

<uni-avatar sh

uniapp圆形头像框

要实现uniapp圆形头像框，可以使用以下代码：

<view class="avatar">
  <image class="avatar-img" src="xxx"></image>
</view>

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

其中，`border-radius: 50%`可以将正方形的头像框变成圆形，`overflow: hidden`可以隐藏头像框外的部分。