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))

---

最快的方法是将图像作为

背景图像：url（“…”）并在样式文件中添加背景尺寸：封面

到avatar-div.

还可以使用带有

img

元素的类，利用

溢出：隐藏

并将img高度设置为100%，以确保圆区域被覆盖。请参见此处的JSFIDLE演示：

---

这就解决了同样的问题，对于那些不一定拥有直接访问权限或发现不太“干净”的用户来说，为类添加样式属性以注入

背景图像

为什么不在服务器端创建方形图像呢？CSS用于样式化，而不是图像处理。你是在要求一个丑陋的黑客。谢谢你让我知道这不是一个容易的修复，我不习惯造型。我将研究如何使用上载代码。谢谢，我将尝试实现此功能。而不是执行？我在.html.slim文件中实现此功能时遇到问题。我需要把化身做成标签吗？