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

注意：我可以删除width或height参数，但这会使图像以不同的形状显示。我希望它总能显示在一个圆圈中。

Answer 1

我通常将图像设置为div的背景图像，然后将其大小设置为“覆盖”并将位置设置为居中。类似的东西：

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

https://jsfiddle.net/5v34188j/

制作一个带有个人资料图片的圈子

1 个答案: