重叠/覆盖多个内嵌图像

Question

我有一个我试图重叠的图像列表，以便它们看起来像这样：

我的代码：

＆＃13;

＆＃13;

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

＆＃13;

<div class="avatars">
    <span class="avatar">
        <img src="https://lorempixel.com/50/50/" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://lorempixel.com/50/50/" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://lorempixel.com/50/50/" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://lorempixel.com/50/50/" width="25" height="25"/>
    </span>
    <!-- Variable amount more avatars -->
</div>
<p>4 People</p>

＆＃13;

＆＃13;

＆＃13;

但显然，我需要递增left值，并且需要递减z-index的头像imgs数量。当然，我可以使用@for指令来做到这一点，但事实是，有一个可变数量的头像imgs。我正在查看length()函数，但它不会像我使用它一样工作。

另一个想法是，有一个设置宽度div，并将图像拟合到其中，但是它有自己的问题（如果有5个图像，或者20，如何控制宽度）。我也可以在其他地方将图像组合到我想要的地方，而不是使用任何CSS。

Answer 1

您可以使用弹性和反向顺序，然后不需要z-index：

.avatars {
  display: inline-flex;
  flex-direction: row-reverse;
  padding-left:50px;
}

.avatar {
  margin-left: -25px;
  position: relative;
  border:1px solid #fff;
  border-radius: 50%;
  overflow:hidden;
  width:50px;
  height:50px;
}

.avatar img {
  width:50px;
  height:50px;
}

<div class="avatars">
  <span class="avatar">
        <img   src="https://lorempixel.com/50/50/">
    </span>
  <span class="avatar">
        <img  src="https://lorempixel.com/60/60/">
    </span>
  <span class="avatar">
        <img   src="https://lorempixel.com/50/50/">
    </span>
  <span class="avatar">
       <img  src="https://lorempixel.com/60/60/">
    </span>
  <!-- Variable amount more avatars -->
</div>
<p>4 People</p>

这是另一个有规模的想法：

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

.avatar {
  margin-left: -25px;
  position: relative;
  display:inline-block;
  border:1px solid #fff;
  border-radius: 50%;
  overflow:hidden;
  width:50px;
  height:50px;
}

.avatar img {
  width:50px;
  height:50px;
  transform:scale(-1,1);
}

<div class="avatars">
  <span class="avatar">
        <img   src="https://lorempixel.com/50/50/">
    </span>
  <span class="avatar">
        <img  src="https://lorempixel.com/60/60/">
    </span>
  <span class="avatar">
        <img   src="https://lorempixel.com/50/50/">
    </span>
  <span class="avatar">
       <img  src="https://lorempixel.com/60/60/">
    </span>
  <!-- Variable amount more avatars -->
</div>
<p>4 People</p>

Answer 2

我更喜欢Temani's，但如果你不能使用flex，因为你必须支持IE 9或更早版本，我会把它留在这里。

请注意，文字方向现在从右到左，因此您需要撤销虚拟人的顺序。

＆＃13;

＆＃13;

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

.avatars {
  
  direction: rtl; /*This is to get the stack with left on top*/
  text-align: left; /*NOw Need to explitly align left*/
  padding-left: 25px; /*Same Value as the negative margin*/
}

＆＃13;

<div class="avatars">
  <span class="avatar">
        <img src="https://lorempixel.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>
  <!-- Variable amount more avatars -->
</div>
<p>4 People</p>

＆＃13;

＆＃13;

＆＃13;