制作一个里面有个人资料图片的圆圈

Question

我有一个网站，个人资料图片以圆圈显示。有些人上传的图片没有 1x1 的比例。目前，rails/scss 将图片压缩为 1x1 raios。我正在尝试删除图片挤压。有什么方法可以裁剪较长的尺寸或使用样式为较短的尺寸添加一些灰色空间？

SCSS

@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;
  }
}

HTML.SLIM

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

注意：我可以只删除宽度或高度参数，但这会使图像以不同的形状显示。我希望它始终显示在一个圆圈中。

Answer 1

我通常将图像设置为 div 的背景图像，然后将其大小设置为“覆盖”并将位置设置为中心。类似的东西：

background-image: url('img/profilepic/1.jpg');
background-size: cover;
background-position: center;

https://jsfiddle.net/5v34188j/