Question

我有这个代码，我继承自UI / UX的人，我不再与之联系。

此代码用于显示图片。它将图片和搜索结果以1x1的比例拍摄，然后将其显示在一个圆圈中。

我希望它反而不是挤压，而是裁剪顶部和底部或两侧以使图片成为1x1比率，然后将其显示在圆圈中。

@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;
  }

  @include mod('xl') {
    width: 160px;
    height: 160px;
    @include avatar(160px);
    @extend %avatar-border-shadow;
  }

  @include mod('settings') {
    cursor: pointer
  }
}

我尝试添加以下代码：

...
  @include mod('lg') {
    display: block;
    margin: auto;
    overflow: hidden;
....

但似乎没有效果。任何帮助将不胜感激。

文件的名称是avatars.scss

编辑：

这是'html / ruby'

img.avatar--lg(src=display_medium_avatar(current_user))

Answer 1

最快的方法是将图片设为background-image: url('...');，并在样式文件中将background-size: cover;添加到avatar-div。

Answer 2

还可以使用img元素使用overflow: hidden并将img高度设置为100％，以确保覆盖圆形区域。请参阅此处的JSFiddle演示：https://jsfiddle.net/dc50gd9q/1/。

这为没有直接访问权限的用户解决了同样的问题，或者为了注入background-image而将样式属性添加到类中“不干净”。

SCSS通过裁剪顶部和底部将图像拟合成圆形

2 个答案: