Перекрытие/наложение нескольких встроенных изображений ⇐ Html

[Anonymous]

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


Мой код:

Код: Выделить всё

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

Код: Выделить всё

[img]https://picsum.photos/70[/img]


[img]https://picsum.photos/50[/img]


[img]https://picsum.photos/20[/img]


[img]https://picsum.photos/100[/img]



4 People

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

Подробнее здесь: https://stackoverflow.com/questions/489 ... ine-images