Наложение нескольких встроенных изображений друг на друга

Question

У меня есть список изображений, которые я пытаюсь перекрыть, чтобы они выглядели примерно так:

Мой код:

.avatar img {
    border-radius: 50%;
    position: relative;
    left: -5px;
    z-index: 1;
}

<div class="avatars">
    <span class="avatar">
        <img src="https://picsum.photos/70" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/50" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/20" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/100" width="25" height="25"/>
    </span>
    <!-- Variable amount more avatars -->
</div>
<p>4 People</p>

Но, очевидно, мне нужно увеличивающееся левое значение и уменьшающийся z-индекс для количества изображений аватара. Конечно, я мог бы сделать это с помощью директивы @for, но дело в том, что количество imgs аватаров варьируется. Я смотрел на функцию length(), но она не работает так, как я собирался ее использовать.

Другая идея состоит в том, чтобы иметь div с установленной шириной и помещать изображения внутри него, но это имеет свои собственные проблемы (что, если есть 5 изображений или 20, как управлять шириной?). Я также мог комбинировать изображения так, как я хочу, в другом месте и не использовать CSS.

_{Свободный перевод вопроса Overlapping/overlaying multiple inline images от участника @Chicken Suop.}

Answer 1

Вы можете использовать flex и обратный порядок, тогда z-index не нужен:

.avatars {
  display: inline-flex;
  flex-direction: row-reverse;
}

.avatar {
  position: relative;
  border: 4px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:last-child) {
  margin-left: -60px;
}

.avatar img {
  width: 100%;
  display: block;
}

<div class="avatars">
  <span class="avatar">
        <img  src="https://picsum.photos/70">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/80">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/90">
    </span>
  <span class="avatar">
       <img src="https://picsum.photos/100">
    </span>
</div>

Вот еще одна идея со scale:

.avatars {
  display: inline-block;
  transform: scale(-1, 1);
}

.avatar {
  position: relative;
  display: inline-block;
  border: 4px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:first-child) {
  margin-left: -60px;
}

.avatar img {
  width: 100%;
  display: block;
  transform: scale(-1, 1);
}

<div class="avatars">
  <span class="avatar">
        <img  src="https://picsum.photos/70">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/80">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/90">
    </span>
  <span class="avatar">
       <img src="https://picsum.photos/100">
    </span>
</div>

Еще одна идея использовать маску на случай, если вы хотите сохранить порядок ваших изображений. Это также даст вам прозрачность между изображениями:

.avatar {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:first-child) {
  margin-left: -60px;
  -webkit-mask:radial-gradient(circle 55px at 5px 50%,transparent 99%,#fff 100%);
          mask:radial-gradient(circle 55px at 5px 50%,transparent 99%,#fff 100%);
}

.avatar img {
  width: 100%;
  display: block;
}

body {
  background:pink
}

<div class="avatars">
  <span class="avatar">
        <img  src="https://picsum.photos/70">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/80">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/90">
    </span>
  <span class="avatar">
       <img src="https://picsum.photos/100">
    </span>
</div>

Еще одна идея с использованием трюка с 3D transformation (без прозрачности)

.avatars {
  transform-style:preserve-3d; /* here */
}

.avatar {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:first-child) {
  margin-left: -60px;
  transform:rotateY(-1deg); /* and here */
}

.avatar img {
  width: 100%;
  display: block;
}

<div class="avatars">
  <span class="avatar">
        <img  src="https://picsum.photos/70">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/80">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/90">
    </span>
  <span class="avatar">
       <img src="https://picsum.photos/100">
    </span>
</div>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

Мне больше нравится ответ @Temani, но если вы не можете использовать flex, потому что вам нужно поддерживать IE 9 или более раннюю версию, я оставлю это здесь.

Обратите внимание, что направление текста теперь справа налево, поэтому вам нужно изменить порядок ваших аватаров.

.avatar img {
  border-radius: 50%;
  position: relative;
  left: -5px;
  margin-left: -25px;
  z-index: 1;
}
.avatars {
  direction: rtl;  /* Это для того, чтобы получить стек с левым верхом */
  text-align: left;  /* Теперь нужно выровнять по левому краю. */
  padding-left: 25px;  /* То же значение, что и отрицательная margin */
}

<div class="avatars">
  <span class="avatar">
        <img src="https://www.fillmurray.com/50/50" width="50" height="50"/>
    </span>
  <span class="avatar">
        <img src="https://www.fillmurray.com/100/100" width="50" height="50"/>
    </span>
  <span class="avatar">
        <img src="https://www.fillmurray.com/200/200" width="50" height="50"/>
    </span>
  <span class="avatar">
        <img src="https://www.fillmurray.com/150/150" width="50" height="50"/>
    </span>
  <span class="avatar">
        <img src="https://www.fillmurray.com/50/50" width="50" height="50"/>
    </span>
  <!-- Переменное количество дополнительных аватаров -->
</div>

_{Свободный перевод ответа от участника @Jon P.}

БЛОГ НА HUSL

Наложение нескольких встроенных изображений друг на друга

Ответы (2 шт):