html - 保持响应的多个图像上的字母

Question

所以我在一些网站上看到，在显示用户个人资料图片的地方，出现了用户姓名缩写，而不是非特定的占位符图像。

我已经决定尝试在我的一个网站上实现它，但我正在努力保持它的响应能力。

我需要一个严格的解决方案，只需要一个实际图像，每个首字母组合都存储在后端某处。

现在这张个人资料图片可以出现在屏幕上的多个位置，因此像许多指南建议的绝对定位不是一种选择。

我想出的“解决方案”利用了以下 css 类:

.profile-image img.with-initials {
    position: relative;
    left: -10px;
    width: 30px;
}

.profile-image .initials {
    position: relative;
    bottom: 2px;
    left: 50%;
    margin: 0 auto;
    float: left;
    z-index: 100;
}

.profile-image span.initials {
    color: #efefef;
    font-weight: 600;
    font-size: 150%;
    line-height: 35px;
    letter-spacing: 1px;
}

除此之外，我首先测试用户是否有个人资料图片，如果没有，我将这些类附加到带有计算出的首字母的空白占位符图像。

这一切都适用于特定的屏幕尺寸，但不幸的是，一旦您开始调整窗口大小时就会分崩离析。

jsfiddle

Answer 1

像这样的东西应该有用，不过你最好还是使用图片:

html:

<div class="profile">
  <div class="profile__circle">
    <span class="profile__letters">AN</span>
  </div>
</div>

CSS:

.profile {
  width: 10vw;
  height: 10vw;
  font-size: 5vw;

  &__circle {
    background-color: red;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    position:relative;
  }

  &__letters {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
  }
}

演示:https://jsfiddle.net/zy9bgyuz/5/