制作一个圈子，里面有个人资料图片

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/