彼此相邻显示多张图片的提示和技巧

Question

我想像下面这样连续显示伪图像：

由于我对CSS不太满意，所以我想知道如何以适当的方式做到这一点？我所有的图片都是静态提供的，所有这些都不必是动态的或滑动的，而仅是响应性地显示和放大

谢谢您的输入

尝试了绝对和相对位置，但在整个地方都怪异地定位。我在这个项目中使用Bootstrap 4

Answer 1

您可以尝试以下方法：

body {
  background: #20262E;
}

div {
  margin: 10px;
  padding: 10px;
  background: #ffffff;
}

img {
  width: 24%;
  border-radius: 50%;
}

<div>
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
</div>

如果您希望绿色勾号带有图像，请按照以下步骤操作：

body {
  background: #20262E;
}

#image-gallery {
  margin: 10px;
  padding: 10px;
  background: #ffffff;
}

.image-box{
  display: inline-block;
  position: relative;
  width: 24%;
}

img {
  width: 100%;
  border-radius: 50%;
}

.green-tick {
  position: absolute;
  bottom: 10%;
  right: 10%;
  border-radius: 50%;
  color: #ffffff;
  background: #00ff00;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" />

<div id="image-gallery">
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
    <i class="fa fa-check green-tick"></i>
  </div>
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
    <i class="fa fa-check green-tick"></i>
  </div>
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
    <i class="fa fa-check green-tick"></i>
  </div>
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
    <i class="fa fa-check green-tick"></i>
  </div>
</div>