У меня есть список изображений, которые я пытаюсь перекрыть, чтобы они выглядели примерно так:
Мой код:
.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.