製作一個圈子，裏面有個人資料圖片

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/