プロフィール写真の入ったサークルを作成する

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の背景画像として設定し、そのサイズを 'cover'に設定して中央に配置します。そのような何か：

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

https://jsfiddle.net/5v34188j/