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

Question

我有这段代码，它是我从一个 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))

Answer 1

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