多个图像的信件保持响应

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/