Letters Over Multiple Images That Stay Responsive

Question

So I've seen on some sites where a users profile picture would be displayed, in place of a non-specific placeholder image, the users initials appear.

I've decided to try and implement this on one of my sites but I'm struggling to keep it responsive.

I need an iron tight solution just short of having an actual image with every combination of initials stored on the backend somewhere.

Now this profile picture can appear in multiple places on the screen so absolute positioning like so many guides suggest isn't an option.

The 'solution' I came up with utilises the following css classes:

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

In addition to this I'm testing to see first whether the user has a profile image and if not I append these classes to a blank placeholder image with the computed initials.

This all works great for a particular screen-size but unfortunately falls apart once you start resizing the window.

jsfiddle

Answer 1

Something like this should work, you're probably better off using an image though:

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

demo: https://jsfiddle.net/zy9bgyuz/5/