CODEWITHSUNDEEP
cssruby-on-railssass
Rorschach
Rorschach

Reputation: 3812

Making a circle with profile pictures inside them

I have a website with profile pictures displayed in circles. Some people upload pictures without 1x1 ratios. Currently, the rails/scss mushes the picture into 1x1 raios. I am trying to remove the picture squishing. Is there some way to either crop the longer dimension or to add some gray-space to the shorter dimension using styling?

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))

Note: I could just remove either the width or height parameter, but this would make the image display in varying shapes. I am hoping to have it always display in a circle.

Upvotes: 2

Views: 1782

Answers (1)

Jacopo
Jacopo

Reputation: 527

i usually set the image as background-image of a div, then set it's size to 'cover' and position to center. something like that:

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

https://jsfiddle.net/5v34188j/

Upvotes: 3

Related Questions