html - SCSS通过裁剪顶部和底部将图像拟合成圆形

我有这段代码，是从一个不再联系的UI/UX用户那里继承来的。
此代码用于显示图片。它拍摄照片并将其压缩到1x1的比例，然后以圆圈的形式显示出来。
相反，我希望它不是压扁，而是裁剪顶部和底部或侧面，使图片的比例为1x1，然后将其显示在圆圈中。

@mixin avatar($size:40px) {
  border-radius: 50%;
  border-radius: $size/2;
}
%avatar-border-shadow {
  border: 5px solid #fff;
  box-shadow: 0 0 15px rgba(#000, 0.4);
}
.avatar {
  @include avatar(40px);

  @include mod('lg') {
    width: 128px;
    height: 128px;
    @include avatar(128px);
    @extend %avatar-border-shadow;
  }

  @include mod('xl') {
    width: 160px;
    height: 160px;
    @include avatar(160px);
    @extend %avatar-border-shadow;
  }

  @include mod('settings') {
    cursor: pointer
  }
}

我试过添加如下代码：

...
  @include mod('lg') {
    display: block;
    margin: auto;
    overflow: hidden;
....

但似乎没有效果。任何帮助都将不胜感激。
文件名为avatars.scss
编辑：
这是“html/ruby”

img.avatar--lg(src=display_medium_avatar(current_user))

最佳答案

最快的方法是将图像设为background-image: url('...');并在样式文件中将background-size: cover;添加到avatar-div。

关于html - SCSS通过裁剪顶部和底部将图像拟合成圆形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33896632/