css - 画一个圆圈，里面放个人资料照片

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/